jquery - 使用 bootstrap3 在内容选项卡和导航选项卡上切换活动状态
问题描述
使用 jQuery,我正在尝试切换tab-pane
. 现在它只适用于,tab-pane
但我也想从data-toggle="tab"
.
$('[data-toggle=tab]').click(function() {
if ($(this).hasClass('active show')) {
$($(this).attr("href")).toggleClass('active show');
}
});
img {width: 48px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Imgur_icon.svg/240px-Imgur_icon.svg.png">
<h5></h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Imgur_icon.svg/240px-Imgur_icon.svg.png">
<h5></h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab3">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Imgur_icon.svg/240px-Imgur_icon.svg.png">
<h5></h5>
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="tab1" class="container tab-pane"><br>
<div class="row">
<div class="col-md-4 case-tab-content">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Imgur_icon.svg/240px-Imgur_icon.svg.png">
<h4>Sometext</h4>
</div>
<div class="col-md-4 case-tab-content">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Imgur_icon.svg/240px-Imgur_icon.svg.png">
<h4>Sometext</h4>
</div>
<div class="col-md-4 case-tab-content">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Imgur_icon.svg/240px-Imgur_icon.svg.png">
<h4>Sometext</h4>
</div>
</div>
</div>
<div id="tab2" class="container tab-pane fade"><br>
<div class="row">
<div class="col-md-4 case-tab-content">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Imgur_icon.svg/240px-Imgur_icon.svg.png">
<h4>Sometext</h4>
</div>
<div class="col-md-4 case-tab-content">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Imgur_icon.svg/240px-Imgur_icon.svg.png">
<h4>Sometext</h4>
</div>
<div class="col-md-4 case-tab-content">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Imgur_icon.svg/240px-Imgur_icon.svg.png">
<h4>Sometext</h4>
</div>
</div>
</div>
<div id="tab3" class="container tab-pane fade"><br>
<div class="row">
<div class="col-md-4 case-tab-content">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Imgur_icon.svg/240px-Imgur_icon.svg.png">
<h4>Sometext</h4>
</div>
<div class="col-md-4 case-tab-content">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Imgur_icon.svg/240px-Imgur_icon.svg.png">
<h4>Sometext</h4>
</div>
<div class="col-md-4 case-tab-content">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Imgur_icon.svg/240px-Imgur_icon.svg.png">
<h4>Sometext</h4>
</div>
</div>
</div>
</div>
解决方案
推荐阅读
- spring - 如何从 @ControllerAdvice 类返回 ModelAndView 对象?
- c# - 为什么.NET 两次添加 SP 参数?
- arduino - Arduino 使用几分钟后停止工作
- php - 如何解决laravel中文件不存在的问题
- python-3.x - 找到具有零特征的数组
- excel-formula - 在具有命名范围的多个工作表中使用 INDEX MATCH
- vue.js - 使用具有多个路由的相同组件,具体取决于路径组件类型
- javascript - 如何仅增加 2 个变量计数器而不是全部的速度
- google-apps-script - 如何将 UI 响应传递给 appscript 中的变量
- c++ - 为什么 g++ 不完全优化这些循环/运算符调用?