Jazzy 1012
asked on
I want a tab to always be underlined when I open div then change
Css:
my code:
JS:
As you can see it changes the underline color as I link on any of the tab. However this is all inside a popup div and when I first open the popup, my "details" tab is displayed. However it is not underlined, how can I make it underlined then become un-underlined when I click on other tabs?
.tabs {
list-style:none;
padding: 0;
}
.tabs:after {
content: " ";
display: table;
clear: both;
}
.tabs li a {
color: #333;
padding-bottom:0.5em;
border-bottom: 2px solid #d7d6d0;
font-size: 0.8em;
}
.tabs li a:active {
border-bottom: 2px solid #cf5630;
}
.tabs li {
float:left;
margin-left: 15px;
margin-right: 15px;
}
.tab1 {
display: none;
}
.tab1.active {
display: block;
}
my code:
<span class="block textCenter tabs flex justifyBetween">
<ul class="tabs">
<li class="uppercase pointer"><a href="#details">details</a></li>
<li class="uppercase pointer"><a href="#ingredients">ingredients</a></li>
<li class="uppercase pointer"><a href="#nutrition">nutrition</a></li>
<li class="uppercase pointer"><a href="#instructions">instructions</a></li>
</ul>
</span>
<div id="tabContent" class="relative">
<span class="shadow block absolute"></span>
<span class="contentBox block">
<div class="tab1" id="details">
<p class="textLeft details">
fdhghjghj
</p>
</div>
<div class="tab1 " id="ingredients">
Ingredients tab
</div>
<div class="tab1" id="nutrition">
Nutrition tab
</div>
<div class="tab1" id="instructions">
Instructions tab
</div>
JS:
$(function() {
$('.tabs a').click(function(e) {
e.preventDefault();
let target = $(this).attr('href');
$('.tab1.active').removeClass('active');
$(target).addClass('active');
$('.tabs a').css('border-bottom', '2px solid #d7d6d0');
$(this).css('border-bottom', '2px solid #cf5630');
});
});
As you can see it changes the underline color as I link on any of the tab. However this is all inside a popup div and when I first open the popup, my "details" tab is displayed. However it is not underlined, how can I make it underlined then become un-underlined when I click on other tabs?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.