Jquery hide và show

28/09/2019

Bài sau » « Bài trước

Với jquery, bạn có thể ẩn và hiển thị phần tử HTML bằng các phương thức  hide()show()

Ví dụ: Thẻ <p> sẽ bị ẩn khi click vào button có id="hide", và hiển thị với button có id="show":

<p>Đoạn văn bản test.</p> <button id="hide">Hide</button> <button id="show">Show</button>

Code jQuery :

$("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });

Cú pháp tổng quát:

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

Giải thích cú pháp trên:

- Tham số speed: là tốc độ ẩn hay hiển thị với các giá trị là: 'fast', 'slow' hoặc mili giây.

- Tham số callback: là gọi function khác sẽ thực thi sau khi phương thức hide() hoặc show() thực thi xong. Phần này sẽ được hướng dẫn cụ thể ở bài học sau.

jQuery toggle()

jQuery toggle() là phương thức tích hợp của 2 phương thức hide()show(). Tức là sẽ hiển thị phần tử đang bị ẩn và sẽ ẩn phần tử đang hiển thị.

Trường hợp ví dụ trên ta viết lại như sau:

<p>Đoạn văn bản test.</p> <button id="toggle">Toggle</button>

Code jQuery :

$("#toggle").click(function(){ $("p").toggle(); });

Cú pháp tổng quát:

$(selector).toggle(speed,callback);

Giải thích cú pháp trên:

- Tham số speed: là tốc độ ẩn hay hiển thị với các giá trị là: 'fast', 'slow' hoặc mili giây.

- Tham số callback: là gọi function khác sẽ thực thi sau khi phương thức toggle() thực thi xong.

Bài sau » « Bài trước
Back to top