Cách hiện và ẩn một phần tử - 04 - Giải pháp website, App & CRM

Cách hiện và ẩn một phần tử – 04

Cách hiện và ẩn một phần tử HTML

Phương thức show() dùng để hiện một phần tử HTML

Phương thức hide() dùng để ẩn một phần tử HTML

Cú pháp CƠ BẢN:

$(selector).show();
$(selector).hide();

Ví dụ:

Khi người dùng click vào nút hiện thì phần tử có id là div2 sẽ được hiện lên

Khi người dùng click vào nút ẩn thì phần tử có id là div2 sẽ bị ẩn đi

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("input[value='hien']").click(function(){
            $("#div2").show();
        })
        $("input[value='an']").click(function(){
            $("#div2").hide();
        })
    })
</script>
<style type="text/css">
    div{height:100px;margin-bottom:30px;}
</style>
</head>
<body>
  <p><input type="radio" name="abc" value="hien" checked> Hiện</p>
  <p><input type="radio" name="abc" value="an"> Ẩn</p>
  <div style="background-color:red"></div>
  <div style="background-color:green" id="div2"></div>
  <div style="background-color:blue"></div>
</body>
</html>

Xem ví dụ

Ngoài ra, chúng ta cũng có thể:

Thiết lập thời gian của việc thực thi hiện/ẩn phần tử.
Thiết lập một hành động nào đó sau khi việc hiện/ẩn phần tử đã được hoàn thành.

Cú pháp NÂNG CAO:

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

Trong đó:

Tham số time là khoảng thời gian của việc thực thi hiện/ẩn phần tử. Giá trị của tham số time có thể là:
- “slow” khoảng thời gian tương đối dài.
- “fast” khoảng thời gian tương đối ngắn.
- milliseconds (Ví dụ: 3000, 9000). Lưu ý: 1000 milliseconds = 1 giây
Tham số callback là một hàm sẽ được thực thi sau khi việc hiện/ẩn phần tử đã được hoàn thành.

Ví dụ 1:

HIỆN/ẨN phần tử chỉ sử dụng tham số time

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("input[value='radio1']").click(function(){
            $("#abc").show("slow");
        })
        $("input[value='radio2']").click(function(){
            $("#abc").hide("slow");
        })
        $("input[value='radio3']").click(function(){
            $("#abc").show("fast");
        })
        $("input[value='radio4']").click(function(){
            $("#abc").hide("fast");
        })
        $("input[value='radio5']").click(function(){
            $("#abc").show(3000);
        })
        $("input[value='radio6']").click(function(){
            $("#abc").hide(3000);
        })
    })
</script>
</head>
<body>
  <p><input type="radio" name="abc" value="radio1" checked>show("slow")</p>
  <p><input type="radio" name="abc" value="radio2">hide("slow")</p>
  <p><input type="radio" name="abc" value="radio3">show("fast")</p>
  <p><input type="radio" name="abc" value="radio4">hide("fast")</p>
  <p><input type="radio" name="abc" value="radio5">show(3000)</p>
  <p><input type="radio" name="abc" value="radio6">hide(3000)</p>
  <div style="background-color:brown;height:200px" id="abc"></div>
</body>
</html>

Ví dụ 2:

HIỆN/ẨN phần tử chỉ sử dụng tham số callback

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
   $(document).ready(function(){
      $("input[value='radio1']").click(function(){
         $("#abc").show(    function(){alert("HIỆN");}    );
      })
      $("input[value='radio2']").click(function(){
         $("#abc").hide(    function(){alert("ẨN");}    );
      })
   })
</script>
</head>
<body>
  <p><input type="radio" name="abc" value="radio1" checked>Hiện</p>
  <p><input type="radio" name="abc" value="radio2">Ẩn</p>
  <div style="background-color:brown;height:200px" id="abc"></div>
</body>
</html>

Ví dụ 3:

HIỆN/ẨN phần tử chỉ sử dụng tham số time & callback

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("input[value='radio1']").click(function(){
            $("#abc").show("slow", function(){alert("HIỆN");});
        })
        $("input[value='radio2']").click(function(){
            $("#abc").hide("slow", function(){alert("ẨN");});
        })
        $("input[value='radio3']").click(function(){
            $("#abc").show("fast", function(){alert("HIỆN");});
        })
        $("input[value='radio4']").click(function(){
            $("#abc").hide("fast", function(){alert("ẨN");});
        })
        $("input[value='radio5']").click(function(){
            $("#abc").show(3000, function(){alert("HIỆN");});
        })
        $("input[value='radio6']").click(function(){
            $("#abc").hide(3000, function(){alert("ẨN");});
        })
    })
</script>
</head>
<body>
  <p><input type="radio" name="abc" value="radio1" checked>show("slow")</p>
  <p><input type="radio" name="abc" value="radio2">hide("slow")</p>
  <p><input type="radio" name="abc" value="radio3">show("fast")</p>
  <p><input type="radio" name="abc" value="radio4">hide("fast")</p>
  <p><input type="radio" name="abc" value="radio5">show(3000)</p>
  <p><input type="radio" name="abc" value="radio6">hide(3000)</p>
  <div style="background-color:brown;height:200px" id="abc"></div>
</body>
</html>

HIỆN/ẨN phần tử bằng phương thức toggle()

Phương thức toggle() dùng để thực hiện luân phiên việc hiện và ẩn phần tử HTML.

Ví dụ:

Khi phần tử đang bị ẩn, phương thức toggle() sẽ hiện phần tử lên.
Khi phần tử đang hiện, phương thức toggle() sẽ ẩn phần tử đi.

Cú pháp: $(selector).toggle(time, callback)

Cách sử dụng tham số “time” và “callback” giống như trong phương thức hide() và show()

Ví dụ 1:

Không sử dụng tham số

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#abc").toggle();
        })
    })
</script>
</head>
<body>
  <p><button>Hiện/Ẩn</button></p>
  <div style="background-color:brown;height:200px;" id="abc"></div>
</body>
</html>

Ví dụ 2:

Chỉ sử dụng tham số time

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#abc").toggle(2000);
        })
    })
</script>
</head>
<body>
  <p><button>Hiện/Ẩn</button></p>
  <div style="background-color:brown;height:200px;" id="abc"></div>
</body>
</html>

Ví dụ 3:

Chỉ sử dụng tham số callback

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#abc").toggle(function(){alert("XONG");});
        })
    })
</script>
</head>
<body>
  <p><button>Hiện/Ẩn</button></p>
  <div style="background-color:brown;height:200px;" id="abc"></div>
</body>
</html>

Ví dụ 4:

Sử dụng tham số time và callback

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#abc").toggle("slow", function(){alert("XONG");});
        })
    })
</script>
</head>
<body>
  <p><button>Hiện/Ẩn</button></p>
  <div style="background-color:brown;height:200px;" id="abc"></div>
</body>
</html>