Jazzy 1012
asked on
Allow tab to be displayed without being clicked and active color border changed
I have this output here:
As you can see I want that when any tab is clicked on for the underline of it to be colored. "example when it is active"
I tried a.active but it didnt work
Also I want when I click the div for the "details section" to be already displayed.
Therefore for the outcome to look something like this:
This is my css:
My normal code:
My javascript:
As you can see I want that when any tab is clicked on for the underline of it to be colored. "example when it is active"
I tried a.active but it didnt work
Also I want when I click the div for the "details section" to be already displayed.
Therefore for the outcome to look something like this:
This is my css:
.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 normal 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>
My javascript:
$(function() {
$('.tabs a').click(function(e) {
e.preventDefault();
let target = $(this).attr('href');
$('.tab1.active').removeClass('active');
$(target).addClass('active');
});
});
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.