英文:
Tab selection in bootstrap nav-tab
问题
I am using WordPress and want to use nav-tab in the 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.
英文:
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.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('.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');
}
});
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/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>
<!-- end snippet -->
答案1
得分: 1
以下是代码部分的翻译：
Demo Code :
$("#myTab li > a").click(function(e) {
e.preventDefault();
$("#myTab li > a ,.tab-pane").removeClass("active");
$(this).addClass("active");
$(".tab-pane").hide(); // 隐藏其他选项卡
$(".tab-content " + $(this).attr("href")).addClass("active").show(); // 显示当前选项卡
});
$('#myTab > li:eq(0) a').click(); // 触发点击第一个选项卡
.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 .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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<div class="container">
<div class="nav_main">
<!-- 导航选项卡 -->
<ul class="nav nav-tabs content-tab" role="tablist" id="myTab">
<li role="presentation" class="content-desc"><a class="desc active" href="#desc" aria-controls="desc" role="tab" data-toggle="tab">内容</a></li>
<li role="presentation" class="content-author"><a class="author" href="#author" aria-controls="author" role="tab" data-toggle="tab">作者</a></li>
<li role="presentation" class="content-comment"><a class="comment" href="#comment" aria-controls="comment" role="tab" data-toggle="tab">评论</a></li>
<li role="presentation" class="content-tag"><a class="tag" href="#tag" aria-controls="tag" role="tab" data-toggle="tab">标签</a></li>
</ul>
<!-- 选项卡内容 -->
<div class="tab-content content_main">
<div role="tabpanel" class="tab-pane active" id="desc">
描述 描述 描述 描述 描述 描述 描述
</div>
<div role="tabpanel" class="tab-pane" id="author">
作者 作者 作者 作者 作者
</div>
<div role="tabpanel" class="tab-pane" id="comment">
评论 评论 评论 评论 评论 评论
</div>
<div role="tabpanel" class="tab-pane" id="tag">
标签 标签 标签 标签 标签
</div>
</div>
</div>
</div>
另一种方法是：
Demo Code :
const triggerTabList = document.querySelectorAll('#myTab a');
triggerTabList.forEach(triggerEl => {
const tabTrigger = new bootstrap.Tab(triggerEl);
triggerEl.addEventListener('click', event => {
event.preventDefault();
tabTrigger.show();
});
});
document.querySelector('#myTab > li:first-child a').click();
.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 .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/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous">
<div class="container">
<div class="nav_main">
<!-- 导航选项卡 -->
<ul class="nav nav-tabs content-tab" role="tablist" id="myTab">
<li role="presentation" class="content-desc"><a class="desc" href="#desc" aria-controls="desc" role="tab" data-toggle="tab">内容</a></li>
<li role="presentation" class="content-author"><a class="author" href="#author" aria-controls="author" role="tab" data-toggle="tab">作者</a></li>
<li role="presentation" class="content-comment"><a class="comment" href="#comment" aria-controls="comment" role="tab" data-toggle="tab">评论</a></li>
<li role="presentation" class="content-tag"><a class="tag" href="#tag" aria-controls="tag" role="tab"
<details>
<summary>英文:</summary>
You can keep only one click event for all tabs and inside that using `$(this)` and `id` show or hide your tabs.
***Demo Code :***
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$("#myTab li > a ").click(function(e) {
e.preventDefault();
$("#myTab li > a ,.tab-pane").removeClass("active");
$(this).addClass("active")
$(".tab-pane").hide() //hide all other tabs
$(".tab-content " + $(this).attr("href")).addClass("active").show(); //show curent
})
$('#myTab > li:eq(0) a').click() // trigger click on first a
<!-- language: lang-css -->
.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 .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;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<div class="container">
<div class="nav_main">
<!-- Nav tabs -->
<ul class="nav nav-tabs content-tab" role="tablist" id="myTab">
<li role="presentation" class="content-desc"><a class="desc active" 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>
<!-- end snippet -->
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*** :
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
const tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', event => {
event.preventDefault()
tabTrigger.show()
})
})
document.querySelector('#myTab > li:first-child a').click()
<!-- language: lang-css -->
.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 .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;
}
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<div class="container">
<div class="nav_main">
<!-- Nav tabs -->
<ul class="nav nav-tabs content-tab" role="tablist" id="myTab">
<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>
<!-- end snippet -->
</details>
# 答案2
**得分**: 1
你可以在不使用jQuery的情况下制作这个。以下是翻译后的部分：
```html
<!-- 开始片段：js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-css -->
.tab-content {
max-width: 650px;
border: 1px solid #00000033;
text-align: justify;
margin: 0px 5px 10px 5px;
padding: 20px;
border-radius: 5px;
line-height: 35px;
}
.nav-link.active {
background-color: #b421f3 !important;
}
.nav-tabs {
border: none;
}
.nav-tabs > li > .nav-link {
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;
}
.nav-tabs {
margin-top: 20px;
}
.nav-link:hover {
text-decoration: none;
}
<!-- 语言: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
<div class="nav_main">
<!-- 导航标签 -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="content-tab" data-bs-toggle="tab" data-bs-target="#content" type="button" role="tab" aria-controls="content" aria-selected="true">content</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="author-tab" data-bs-toggle="tab" data-bs-target="#author" type="button" role="tab" aria-controls="author" aria-selected="false">author</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="comment-tab" data-bs-toggle="tab" data-bs-target="#comment" type="button" role="tab" aria-controls="comment" aria-selected="false">comment</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tag-tab" data-bs-toggle="tab" data-bs-target="#tag" type="button" role="tab" aria-controls="tag" aria-selected="false">tag</button>
</li>
</ul>
<!-- 标签面板 -->
<div class="tab-content">
<div class="tab-pane fade show active" id="content" role="tabpanel" aria-labelledby="content-tab" tabindex="0">
desc desc desc desc desc desc desc
</div>
<div class="tab-pane fade" id="author" role="tabpanel" aria-labelledby="author-tab" tabindex="0">
author author author author author
</div>
<div class="tab-pane fade" id="comment" role="tabpanel" aria-labelledby="comment-tab" tabindex="0">
comment comment comment comment comment comment
</div>
<div class="tab-pane fade" id="tag" role="tabpanel" aria-labelledby="tag-tab" tabindex="0">
tag tag tag tag tag tag
</div>
</div>
</div>
</div>
<!-- 结束片段 -->
英文:
you can make thit without Jquery
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.tab-content {
max-width: 650px;
border: 1px solid #00000033;
text-align: justify;
margin: 0px 5px 10px 5px;
padding: 20px;
border-radius: 5px;
line-height: 35px;
}
.nav-link.active {
background-color: #b421f3 !important;
}
.nav-tabs {
border: none;
}
.nav-tabs > li > .nav-link {
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;
}
.nav-tabs {
margin-top: 20px;
}
.nav-link:hover {
text-decoration: none;
}
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js
"></script>
<div class="container">
<div class="nav_main">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="content-tab" data-bs-toggle="tab" data-bs-target="#content" type="button" role="tab" aria-controls="content" aria-selected="true">content</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="author-tab" data-bs-toggle="tab" data-bs-target="#author" type="button" role="tab" aria-controls="author" aria-selected="false">author</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="comment-tab" data-bs-toggle="tab" data-bs-target="#comment" type="button" role="tab" aria-controls="comment" aria-selected="false">comment</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tag-tab" data-bs-toggle="tab" data-bs-target="#tag" type="button" role="tab" aria-controls="tag" aria-selected="false">tag</button>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade show active" id="content" role="tabpanel" aria-labelledby="content-tab" tabindex="0">
desc desc desc desc desc desc desc
</div>
<div class="tab-pane fade" id="author" role="tabpanel" aria-labelledby="author-tab" tabindex="0">
author author author author author
</div>
<div class="tab-pane fade" id="comment" role="tabpanel" aria-labelledby="comment-tab" tabindex="0">
comment comment comment comment comment comment
</div>
<div class="tab-pane fade" id="tag" role="tabpanel" aria-labelledby="tag-tab" tabindex="0">
tag tag tag tag tag tag
</div>
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论