How To

Cara Membuat Active Class Pada Sebuah Elemen

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>

Hanifah Nurbaeti

Share
Tags: CSSHow To