Home » How To » Cara Membuat Active Class Pada Sebuah Elemen

Cara Membuat Active Class Pada Sebuah Elemen

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Di bawah ini kita akan mempelajari cara menambahkan kelas aktif ke elemen saat ini dengan JavaScript.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Style untuk buttons */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

/* Style untuk active class dan tombol di atas mouse */
.active, .btn:hover {
  background-color: #666;
  color: white;
}
</style>
</head>
<body>

<h1>Active Button</h1>
<p>Sorot tombol aktif / arus (ditekan).</p>
  
<div id="myDIV">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn active">3</button>
  <button class="btn">4</button>
  <button class="btn">5</button>
</div>

<script>
// Tambahkan kelas aktif ke tombol saat ini (sorot)
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
  });
}
</script>

</body>
</html>

Active Class

Langkah 1) Tambahkan HTML:
Contoh

<div id="myDIV">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn active">3</button>
  <button class="btn">4</button>
  <button class="btn">5</button>
</div>

Langkah 2) Tambahkan CSS:
Contoh

/* Style untuk buttons */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

/* Gaya kelas aktif, dan tombol di atas mouse */
.active, .btn:hover {
  background-color: #666;
  color: white;
}

Langkah 3) Tambahkan JavaScript:
Contoh

// Dapatkan container elemen 
var btnContainer = document.getElementById("myDIV");

// Dapatkan semua tombol dengan class = btn" di dalam container
var btns = btnContainer.getElementsByClassName("btn");

// Ulangi tombol dan tambahkan kelas aktif ke tombol saat ini yang diklik
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

Jika tidak memiliki kelas aktif yang disetel pada elemen tombol untuk memulai, gunakan kode berikut:

Contoh

// Dapatkan container elemen
var btnContainer = document.getElementById("myDIV");

// Dapatkan semua tombol dengan class = btn" di dalam container
var btns = btnContainer.getElementsByClassName("btn");

// Ulangi tombol dan tambahkan kelas aktif ke tombol saat ini yang diklik
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");

    // jika tidak ada active class
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }

    // Tambahkan active class ke current button clicked 
    this.className += " active";
  });
}

Maka kan jadi seperti ini :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Style untuk buttons */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

/* style untuk active class dan tombol di atas mouse */
.active, .btn:hover {
  background-color: #666;
  color: white;
}
</style>
</head>
<body>

<h1>Active Button</h1>
<p>Sorot tombol aktif / arus (ditekan).</p>
  
<div id="myDIV">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="btn">5</button>
</div>

<script>
// Tambahkan kelas aktif ke tombol saat ini (sorot)
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  if (current.length > 0) { 
    current[0].className = current[0].className.replace(" active", "");
  }
  this.className += " active";
  });
}
</script>

</body>
</html>

You may also like