Reputation: 55
How i can highlight a tab that are currently active??? This is my html code.
<a href="#tab1"></a>
<a href="#tab2"></a>
<a href="#tab3"></a>
<a href="#tab4"></a>
And this is my jquery code that i'm currently using
$(document).ready(function(){
$(".tabs").not(":first").hide();
$(".tab .control a").click(function(){
storage = $(this).attr("href");
$(".tabs").hide();
$(storage).show();
});
});
Upvotes: 2
Views: 1530
Reputation: 1242
Add some class to your tabs. Then create CSS class that will be added on clicked element.
HTML:
<a href="#tab1" class="tab">Tab 1</a>
<a href="#tab2" class="tab">Tab 2</a>
CSS:
.tab.active {
background: gray;
}
JavaScript:
$('.tab').on('click', function() {
// Remove .active class from all .tab class elements
$('.tab').removeClass('active');
// Add .active class to currently clicked element
$(this).addClass('active');
});
Working example: https://jsfiddle.net/cr29y1tc/23/
Upvotes: 2