Entonces, el problema es que uso el objetivo de datos en la etiqueta de anclaje (a) en lugar de href, por lo que no puedo diseñarlo cuando está activo . Así que normalmente uso 'a:active{styling}' , pero no funciona para este.
Aquí está el violín JS: https://jsfiddle.net/sp1vh94u/4/
Aquí está el código:
<ul > <li> <a data-target="#a" aria-controls="a" role="tab" data-toggle="tab">A</a> </li> <li> <a data-target="#b" aria-controls="b" role="tab" data-toggle="tab">B</a> </li> <li> <a data-target="#c" aria-controls="c" role="tab" data-toggle="tab">C</a> </li> </ul>Todo funciona bien, necesito ayuda con el estilo, eso es todo. :)
Si desea evitar href, entonces es posible con JS.
const as = document.querySelectorAll('.nav-tabs a') as.forEach(a => a.addEventListener('click', e => { e.target.classList.add('visited'); })) <!-- begin snippet: js hide: false console: true babel: false --> .nav-tabs a{ cursor: pointer; text-decoration: none; color: black; } .nav-tabs a:hover{ color: orange; } .nav-tabs a:active{ color: red; } .visited { color: white !important; background: red; } <div class="navcontent" role="tabpanel"> <ul id="BarTab" class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#" data-target="#Mat" aria-controls="Mat" role="tab" data-toggle="tab">Mat</a> </li> <li role="presentation"> <a href="#" data-target="#Bat" aria-controls="Bat" role="tab" data-toggle="tab">Bat</a> </li> <li role="presentation"> <a href="#" data-target="#Cat" aria-controls="Cat" role="tab" data-toggle="tab">Cat</a> </li> </ul> </div>