Cách ẩn và hiện một thành phần html bằng jQuery

by 7:54:00 PM 0 nhận xét
Trong jQuery bạn sử dụng method hide() và show() để thực hiện hành động ẩn một thành phần nào đó trong html, cách thực hiện nhanh như sau:

Tạo một file html với đoạn code bên dưới:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>
</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>
Trong file html trên ta có đoạn jQuery tạo hành động ẩn thành phần html là <p> khi click <button> có id là hide và để hiện thành phần <p> ta click <button> có id là show.

Rất đơn giản phải không nào, bạn hãy lưu và mở trên trình duyệt để xem kết quả nhé.

Chúc các bạn thành công!

Thảo luận

0 nhận xét:

Post a Comment