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>
