I am currently attempting to modify the color of the active tab using CSS and the :target property. The issue I am facing is that I am unable to identify the clicked tab when using the :target property. Therefore, I would like the active tab to be visible when clicked, and I also want to display the first tab by default. Can anyone assist me in resolving this?
Below is the code snippet:
.tab {
display: flex;
flex-direction: row;
margin-bottom: 30px;
}
.tab li {
color: var(--dark);
margin-right: 15px;
font-size: 22px;
position: relative;
}
.tab li:after {
height: 1px;
content: '';
background-color: rgb(10, 170, 219) !important;
width: 100%;
position: absolute;
left: 0;
}
.tab li h2 {
font-size: inherit;
}
.tab li a {
text-decoration: none;
color: inherit;
}
#tab .tab-content {
display: none;
}
#tab .tab-content:target {
display: block;
}<div id="tab">
<ul class="tab">
<li>
<h2><a href="#tab1">Tab1</a></h2>
</li>
<li>
<h2><a href="#tab2">Tab2</a></h2>
</li>
</ul>
<div id="tab1" class="tab-content">Content1</div>
<div id="tab2" class="tab-content">Content2</div>
</div>