I am using wordpress and want to use nav-tab in bootstrap library.
The default nav-tab mode of the Bootstrap library is very simple, so I want to improve it with a little script code.
I want the first tab to be active when the page is loaded and its background to be different from the rest of the tabs. But when another tab is clicked, the new tab will be activated and its background will change, and the first tab will take the default background and become inactive.
I wrote a separate script for each tab, which is very bad, and worse, this code does not work at all. That is, by clicking on each tab instead of the background (li); The background (ul) changes.
$('.nav_main').find('li.content-desc').click(function () {
if ($(this).parent().find("ul").eq(0).is(':visible')) {
$(this).parent().removeClass('active');
} else {
$(this).parent().addClass('active');
}
});
$('.nav_main').find('li.content-author').click(function () {
if ($(this).parent().find("ul").eq(0).is(':visible')) {
$(this).parent().removeClass('active');
} else {
$(this).parent().addClass('active');
}
});
$('.nav_main').find('li.content-comment').click(function () {
if ($(this).parent().find("ul").eq(0).is(':visible')) {
$(this).parent().removeClass('active');
} else {
$(this).parent().addClass('active');
}
});
$('.nav_main').find('li.content-tag').click(function () {
if ($(this).parent().find("ul").eq(0).is(':visible')) {
$(this).parent().removeClass('active');
} else {
$(this).parent().addClass('active');
}
});.content_main {
width: 650px;
border: 1px solid #00000033;
text-align: justify;
margin: 0px 5px 10px 5px;
padding: 20px;
border-radius: 5px;
line-height: 35px;
}
.nav_main ul.active {
background: #b421f3;
}
.content-tab {
border: none;
}
.nav-tabs>li>a {
background: #e2e2e2;
border: 1px solid #00000033;
box-shadow: 0 -2px 0 #2196f3;
padding: 14px;
color: #000;
margin: 0px 15px 0px 5px;
border-radius: 5px 5px 0 0;
}
.content-tab {
margin-top: 20px;
}
.content-tab a:hover {
text-decoration: none;
}
.content-comment {
margin-right: -10px;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="nav_main">
<!-- Nav tabs -->
<ul class="nav nav-tabs content-tab" role="tablist">
<li role="presentation" class="content-desc"><a class="desc" href="#desc" aria-controls="desc"
role="tab" data-toggle="tab">content</a></li>
<li role="presentation" class="content-author"><a class="author" href="#author" aria-controls="author"
role="tab" data-toggle="tab">author</a></li>
<li role="presentation" class="content-comment"><a class="comment" href="#comment"
aria-controls="comment" role="tab" data-toggle="tab">comment</a></li>
<li role="presentation" class="content-tag"><a class="tag" href="#tag" aria-controls="tag" role="tab"
data-toggle="tab">tag</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content content_main">
<div role="tabpanel" class="tab-pane active" id="desc">
desc desc desc desc desc desc desc
</div>
<div role="tabpanel" class="tab-pane" id="author">
author author author author author
</div>
<div role="tabpanel" class="tab-pane" id="comment">
comment comment comment comment comment comment
</div>
<div role="tabpanel" class="tab-pane" id="tag">
tag tag tag tag tag tag
</div>
</div>
</div>
</div>
2
Answers
You can keep only one click event for all tabs and inside that using
$(this)andidshow or hide your tabs.Demo Code :
Other way : You can enable each tab via click event and initialise your tabs using
bootstrap.Tab()and can make the first tab active by calling.click()on it .Demo Code :
you can make thit without Jquery