有两套<ul>
我的页面中的元素。它正在工作,但现在的问题是有两个选项卡同时处于事件状态。假设我点击 tab-3
然后tab-a
。该选项卡将切换到 tab-a
但现在两者都处于活跃状态。我该如何解决这个问题?
<div>
<div class="hr-text hr-text-left m-t-2 m-b-1"><h6><strong>List 1</strong></h6></div>
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a data-target="#tab-1" data-toggle="tab">1</a></li>
<li role="presentation"><a data-target="#tab-2" data-toggle="tab">2</a></li>
<li role="presentation"><a data-target="#tab-3" data-toggle="tab">3</a></li>
</ul>
<div class="hr-text hr-text-left m-t-2 m-b-1"><h6><strong>List 2</strong></h6></div>
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class=""><a data-target="#tab-a" data-toggle="tab">A</a></li>
<li role="presentation"><a data-target="#tab-b" data-toggle="tab">B</a></li>
<li role="presentation"><a data-target="#tab-c" data-toggle="tab">C</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab-1"><h1>1</h1></div>
<div class="tab-pane" id="tab-2"><h1>2</h1></div>
<div class="tab-pane" id="tab-3"><h1>3</h1></div>
<div class="tab-pane" id="tab-a"><h1>A</h1></div>
<div class="tab-pane" id="tab-b"><h1>B</h1></div>
<div class="tab-pane" id="tab-c"><h1>C</h1></div>
</div>
</div>
最佳答案
只需更改您的 html,如下所示:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div>
<div class="hr-text hr-text-left m-t-2 m-b-1">
<h6><strong>List 1</strong></h6>
</div>
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a data-target="#tab-1" data-toggle="tab">1</a></li>
<li role="presentation"><a data-target="#tab-2" data-toggle="tab">2</a></li>
<li role="presentation"><a data-target="#tab-3" data-toggle="tab">3</a></li>
<li><h6><strong>List 2</strong></h6></li>
<li role="presentation" class=""><a data-target="#tab-a" data-toggle="tab">A</a></li>
<li role="presentation"><a data-target="#tab-b" data-toggle="tab">B</a></li>
<li role="presentation"><a data-target="#tab-c" data-toggle="tab">C</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab-1">
<h1>1</h1>
</div>
<div class="tab-pane" id="tab-2">
<h1>2</h1>
</div>
<div class="tab-pane" id="tab-3">
<h1>3</h1>
</div>
<div class="tab-pane" id="tab-a">
<h1>A</h1>
</div>
<div class="tab-pane" id="tab-b">
<h1>B</h1>
</div>
<div class="tab-pane" id="tab-c">
<h1>C</h1>
</div>
</div>
</div>
关于jquery - BootStrap 多个事件导航选项卡问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45228256/