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 class="wdc-table-menu"> <ul id="menu_wdc"> <li><a class="wdc_btn active" href="#">WDC</a></li> <li><a class="wdc-btn" href="#">History</a></li> <li><a class="wdc-btn" href="#">Components</a></li> </ul> </div>
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 class="wdc-table-menu"> <ul id="menu_wdc"> <li><a class="wdc-btn active" href="#">WDC</a></li> <li><a class="wdc-btn" href="#">History</a></li> <li><a class="wdc-btn" href="#">Components</a></li> </ul> </div>
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 class="wdc-table-menu"> <ul id="menu_wdc" onclick="myfunction()"> <li><a id="active" class="wdc_btn active" href="#">WDC</a></li> <li><a class="wdc-btn" href="#">History</a></li> <li><a class="wdc-btn" href="#">Components</a></li> </ul> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.