<div class="wrapperJ">
<div class="menu-navJ">
<ul>
<li><a class="btnJ active" id="1" href="#">Home</a></li>
<li><a class="btnJ" href="#" id="2">About</a></li>
<li><a class="btnJ" href="#" id="3">Our Work</a></li>
<li><a class="btnJ" href="#" id="4">Sitemap</a></li>
<li><a class="btnJ" href="#" id="5">Contact</a></li>
</ul>
</div>
.wrapperJ {
display: flex;
width: 100%;
padding: 20px;
box-sizing: border-box;
}
.content-wrapperJ {
width: 100%;
text-align: center;
}
.menu-navJ {
border-right: 2px solid #333;
width: 350px;
padding: 0 15px 0 0;
}
.menu-navJ ul {
list-style: none;
padding: 0;
margin: 0 !important;
}
.menu-navJ ul li {
text-decoration: none;
background: #333;
margin-bottom: 7px;
display: flex;
align-items: center;
padding: 0 !important;
}
.menu-navJ ul li a {
text-decoration: none;
color: #fff !important;
width: 100%;
padding: 12px 10px;
font-family: verdana;
font-size: 13px;
}
.menu-navJ ul li a:hover {
background: #04aa6d;
}
.menu-navJ ul li a.active {
background: #04aa6d;
color: #fff !important;
}
let buttons = document.getElementsByClassName("btnJ");
var id;
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", (e) => {
buttons[i].classList.add("active"); //menambahkan class
id = buttons[i].id;
for (let i = 0; i < buttons.length; i++) {
if (id != buttons[i].id) {
buttons[i].classList.remove("active"); //menghapus class
}
}
});
}
HTML
CSS
JS