Highlighting active tab with single page navigation - html

Question

I really hope I'm not repeating an old question - I'm new to selectors so my terminology might be lacking.
I'm working on a tabbed single-page webpage based around this Default :target with CSS solution. I would like the current tab to have its link highlighted or altered in some way, to indicate the current location.
HTML:
<ul id="tabnav">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<a id="tab1"></a>
<a id="tab2"></a>
<div class="tab tab1 default-tab">This is text you should see as you load the page</div>
<div class="tab tab2">This is text that will appear after you click on tab 2</div>
CSS:
.tab {
display:none
}
.default-tab {
display:block
}
:target ~ .default-tab {display:none}
#tab1:target ~ .tab1,
#tab2:target ~ .tab2 {
display: block
}
ul#tabnav a:hover {
background: red;
}
ul#tabnav a:target{
border-width: thick;
border-color: black;
}
It seems like my last element (a:target) doesn't do anything, even though clicking on tabs does bring me to new anchors and change the displayed content. Any suggestions?

Answer 1

:target is the selector for the element on the page that has the id or name of the anchor name in the URL. So ul#tabnav a:target won't match anything, but if you change the selector to a:target, it will style the 2 links you have in the middle of the page, <a id="tab1"></a><a id="tab2"></a>
To style the "active" link in your navigation you'll need to use javascript to add a class on click, then style that class.
var $links = $('#tabnav a');
$links.on('click',function(e) {
e.preventDefault();
$links.removeClass('active');
$(this).addClass('active');
})
.tab {display:none}
.default-tab {display:block}
:target ~ .default-tab {display:none}
#tab1:target ~ .tab1,
#tab2:target ~ .tab2 {
display: block
}
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<ul id="tabnav">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<a id="tab1"></a>
<a id="tab2"></a>
<div class="tab tab1 default-tab">
This is text you should see as you load the page
</div>
<div class="tab tab2">
This is text that will appear after you click on tab 2
</div>

Answer 2

You can use the bootstrap tabs it will solve you problem and works fine.
Please check the demo here
Hope this will solve you problem.
Happy Coding :)