两个活动标签同时！我该怎么做？
两个活动标签同时！我该怎么做？
提问于 2017-12-13 10:36:02
我正在工作的网站有两个面板并排与标签。它需要有两个小组在同一时间活动。如果我在右边切换面板，左边的面板应该仍然显示它的内容。现在，在我选择在任何面板上切换选项卡之后，只有一个选项卡处于活动状态。
我确实开始使用Bootstrap，但是它决定将它从项目中删除。然后我编写了新的SCSS，修改了HTML并创建了一个新的javascript文件。
下面是一些代码片段:首先是Javascript文件，它处理逻辑。然后您可以看到左栏的代码，以及面板上的内容，等等。
$(document).ready(function() { /*Javascript for the left bar */
$('ul.nav li').click(function() {
var tab_id = $(this).attr('data-tab');
$('ul.nav li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
});
$('ul.cor.li').click(function() { /*Javascript for the right bar */
var tab_id = $(this).attr('data-tab');
$('ul.cor.li').removeClass('active');
$('.tab-content').removeClass('active');
$(this).addClass('active');
$("#" + tab_id).addClass('active');
});
});ul.nav li {
list-style-type: none;
display: inline;
overflow: hidden;
padding: 3px 15px;
cursor: pointer;
}
.tab-content {
display: none;
background: white;
padding: 15px;
}
.tab-content.current {
display: inherit;
}
.navbar-light {
border-left-color: black;
}
.nav,
.tabs {}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!-- left side bar -->
<div class="flex-container">
<div class="overview-flexbox-mid">
<div id="leftPanel">
<ul class="nav nav-tabs navbar-light bg-light" id="leftTabs">
<li class="nav-item nav-link current" data-tab="tab-1"><i class="fa fa-compress" aria-hidden="true"></i> Subject1
</li>
<li class="nav-item nav-link" data-tab="tab-2"><i class="fa fa-book" aria-hidden="true"></i> Subject2
</li>
</ul>
</div>
</div>
</div>
<div id="tab-1" class="tab-content current">
<div class="flex-container-horizontal" id="leftPanelContent1">
<h1>Some text</h1>
</div>
</div>
<!-- left side content -->
<div id="tab-2" class="tab-content">
<h1>More text</h1>
</div>
<!-- right side bar -->
<div class="overview-flexbox-mid">
<div id="rightPanel">
<ul class="cor nav nav-tabs navbar-light bg-light" id="rightTabs">
<li class="nav-item nav-link active" data-tab="tab-5"><i class="fa fa-bar-chart" aria-hidden="true"></i> Subject3
</li>
<li class="nav-item nav-link" data-tab="tab-6"><i class="fa fa-signal" aria-hidden="true"></i> Subject4
</li>
</ul>
</div>
</div>
<!--right side content-->
<div id="tab-5" class="tab-content active">
<div class="flex-container-horizontal">
<h1>Content</h1>
</div>
</div>
<div id="tab-6" class="tab-content">
<h1>Content 2</h1>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-12-13 10:47:50
将一个div中的左右制表符与一个类包装在一起，选择该类来删除current类。
<div class="wrap">
......
<div id="leftPanel"></div>
......
</div>
<div class="wrap">
......
<div id="rightPanel"></div>
......
</div>联署材料：
$('.nav li').click(function() {
var tab_id = $(this).attr('data-tab');
$(this).closest('.wrap').find('ul.nav li,.tab-content').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
})Stack Overflow用户
发布于 2017-12-13 10:41:21
您试图从激活的选项卡内容中删除active类，但是当两个选项卡内容具有相同的类名时，两个选项卡内容都将失去它们的active类。修改如下：
$(document).ready(function () {
$('ul.nav li').click(function () {
var tab_id = $(this).attr('data-tab');
$(this).removeClass('current');
$(this).find('.tab-content').removeClass('current');// modify this
$(this).addClass('current');
$("#" + tab_id).addClass('current');
});
$('ul.cor.li').click(function () {
var tab_id = $(this).attr('data-tab');
$(this).removeClass('active');
$(this).find('.tab-content').removeClass('active');
$(this).addClass('active');
$("#" + tab_id).addClass('active');
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47790911
复制相关文章
相似问题
腾讯云开发者
