Add Class vào menu trong Javascript


Hôm nay ta sẽ học cách thêm class vào thẻ li khi ta click vào, khi click vào thẻ li khác thì sẽ xoá class ở thẻ li củ và thêm class vào thẻ li mới.

Ta có ul sau :

<style>
   .list-item {
     list-style-type:none;
   }
</style>

<ul>
  <li class="list-item">Home</li>
  <li class="list-item">About</li>
  <li class="list-item">Contact</li>
</ul>

Để có thể thêm sự kiện click sẽ gọi hàm thì ta dùng onclick

<ul>
  <li class="list-item" onclick="addClassFunc(0)">Home</li>
  <li class="list-item"  onclick="addClassFunc(1)">About</li>
  <li class="list-item"  onclick="addClassFunc(2)">Contact</li>
</ul>

Để biết là click vào thẻ li nào ta thêm vào hàm addClassFunc với id là 0,1,2. Bây giờ ta viết hàm addClassFunc. Đầu tiên ta phải lấy ra tất cả thẻ li

var li = document.getElementsByClassName('list-item');
console.log(li); // HTML Collection 

Do Trả về là HTML Collection, để dùng forEach để lặp qua các li, ta phải chuyển về array

li = Array.from(li);

li giờ là Array, Mảng li sẽ có index bắt đầu là 0. Bây giờ ta sẽ duyệt qua tất cả li, li nào có index trùng với id của hàm gởi vào thì thêm class

<style>
   .activeStatus {
     color: white;
     background: green;
     font-weight: bold;
   }

còn index khác id gởi vào thì xoá class.

  function addClassFunc(id){
    var li = document.getElementsByClassName('list-item');
    console.log(li); // HTML Collection(3)
    li = Array.from(li);

    li.forEach(function(item,index){
      if(index  == id) {
        item.classList.add('activeStatus');
      }else {
        item.classList.remove('activeStatus');
      }
    });
  }


Ta thực hành code sau nhé

<style>
   .list-item {
     list-style-type:none;
   }
   .activeStatus {
     color: white;
     background: green;
     font-weight: bold;
   }
</style>
<ul>
  <li class="list-item" onclick="addClassFunc(0)">Home</li>
  <li class="list-item"  onclick="addClassFunc(1)">About</li>
  <li class="list-item"  onclick="addClassFunc(2)">Contact</li>
</ul>

<script>
  function addClassFunc(id){
    var li = document.getElementsByClassName('list-item');
    console.log(li); // HTML Collection(3)
    li = Array.from(li);

    li.forEach(function(item,index){
      if(index  == id) {
        item.classList.add('activeStatus');
      }else {
        item.classList.remove('activeStatus');
      }
    });
  }
</script>

Click vào từng li sẽ thêm class vào

  • Home
  • About
  • Contact

Cũng đơn giản ha ? ^_^