I'm working on a horizontal HTML tab and I want to hide the bottom border of the selected tab.
Here is the code I currently have - https://jsfiddle.net/vgx2k7p5/
This issue has been raised in discussions on Stack Overflow here and here
However, the solutions provided do not work for me as I am using a div structure without much JavaScript involved.
jQuery('.tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
jQuery(currentAttrValue).show().siblings().hide(); //changed here
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});.tabs {
width: 90%;
margin: auto;
}
/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
display: block;
clear: both;
content: '';
}
.tab-links {
margin: 0px;
}
.tab-links li {
margin: 0px 3px;
float: left;
list-style: none;
}
.tab-links a {
padding: 9px 15px;
display: inline-block;
border-radius: 3px 3px 0px 0px;
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #999;
transition: all linear 0.2s;
border: 1px solid #fff;
}
.tab-links a:hover {
text-decoration: none;
}
li.active a,
li.active a:hover {
border: 1px solid #ccc;
border-bottom: 1px solid #fff;
color: #444;
}
/*----- Content of Tabs -----*/
.tab-content {
padding: 15px;
border-radius: 3px;
border: 1px solid #ccc;
background: #fff;
min-height: 300px;
z-index: -99;
}
.tab {
display: none;
min-height: 300px;
}
.tab.active {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabs margintop20">
<ul class="tab-links">
<li class="active"><a href="#tab1">PROFILE</a>
</li>
<li><a href="#tab2">REVIEWS</a>
</li>
<li><a href="#tab3">REWARDS</a>
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active clearfix">
</div>
<div id="tab2" class="tab">
</div>
<div id="tab3" class="tab">
<h3>Videos and Screenshots</h3>
</div>
</div>
</div>
</div>What could be the issue here? I've tried adjusting the z-index and border-bottom width without success.