Jazzy 1012
asked on
Show tab when enter div and change underline color
I have this output now:
How can I make it that when this div appears the "details" tab is always open and like how it is in the second picture below
Also for the active tab to have a different color border.
My css:
code:
How can I make it that when this div appears the "details" tab is always open and like how it is in the second picture below
Also for the active tab to have a different color border.
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;
}
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>
ASKER
it didnt work
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
try this