I'm trying to change the active class when I click one of the items in the menu
, but how do I change the color on selected tab to another active
tab and then remove the old one?
.wdc-table-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #484A51;
border-top-right-radius: 0.938rem;
border-top-left-radius: 0.938rem;
}
.wdc-table-menu li {
float: left;
}
.wdc-table-menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-top-right-radius: 0.938rem;
border-top-left-radius: 0.938rem;
}
.wdc-table-menu li a:hover {
background-color: #3A3B41;
}
.wdc-table-menu .active {
background-color: #3A3B41;
}
.wdc-table-title {
text-align: center;
}
.wdc-table-title p {
color: #D3D3D9;
font-size: 2rem !important;
font-weight: bold;
}
<div >
<ul id="menu_wdc">
<li><a href="#">WDC</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Components</a></li>
</ul>
</div>
CodePudding user response:
You would wanna use JavaScript to achieve this like so :
const links =document.querySelectorAll(".wdc-btn ");
links.forEach(btn => btn.addEventListener("click",(e)=>{
e.preventDefault();
document.querySelector(".wdc-btn.active").classList.remove("active");
btn.classList.add("active")
}));
.wdc-table-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #484A51;
border-top-right-radius: 0.938rem;
border-top-left-radius: 0.938rem;
}
.wdc-table-menu li {
float: left;
}
.wdc-table-menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-top-right-radius: 0.938rem;
border-top-left-radius: 0.938rem;
}
.wdc-table-menu li a:hover {
background-color: #3A3B41;
}
.wdc-table-menu .active {
background-color: #3A3B41;
}
.wdc-table-title {
text-align: center;
}
.wdc-table-title p {
color: #D3D3D9;
font-size: 2rem !important;
font-weight: bold;
}
<div >
<ul id="menu_wdc">
<li><a href="#">WDC</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Components</a></li>
</ul>
</div>
CodePudding user response:
You can use pseudo-class :focus
. Also an event onclick
for remove .active
:
function myfunction(){
document.getElementById("active").classList.remove("active");
}
.wdc-table-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #484A51;
border-top-right-radius: 0.938rem;
border-top-left-radius: 0.938rem;
}
.wdc-table-menu li {
float: left;
}
.wdc-table-menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-top-right-radius: 0.938rem;
border-top-left-radius: 0.938rem;
}
.wdc-table-menu li a:hover {
background-color: #3A3B41;
}
.wdc-table-menu li .active{
background-color: #ff0000;
}
.wdc-table-menu li a:focus{ /*here*/
background-color: #ff0000;
}
.wdc-table-title {
text-align: center;
}
.wdc-table-title p {
color: #D3D3D9;
font-size: 2rem !important;
font-weight: bold;
}
<div >
<ul id="menu_wdc" onclick="myfunction()">
<li><a id="active" href="#">WDC</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Components</a></li>
</ul>
</div>