How to style a data-target anchor tag

Question

So the issue is I use data-target in the anchor(a) tag instead of href, so I am not able to style it when its active . So I usually use 'a:active{styling}' , but its not working for this one.

Here is the JS fiddle: https://jsfiddle.net/sp1vh94u/4/

Here is the code:

<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>

Everything is working just fine, I need help with the styling thats all. :)

Answer 1

If you want avoid href then it is possible with 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>