替换引导标签中的标签不仅边框
[英]replacement of tabs in bootstrap tabs not only border
问题描述
以下代码用于引导程序选项卡，在此活动选项卡具有边框并分别显示其选项卡，但是我想当任何人单击第二个选项卡时，第一个选项卡由第二个选项卡替换，并且当某人单击时第三个标签页第一个标签页被第三个标签页替换。 谁能告诉我如何实现？
这是代码片段：
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script> </head> <body> <div> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">...</div> <div role="tabpanel" class="tab-pane" id="profile">...</div> </div> </div> </body> </html>
2 个解决方案
解决方案1
0 2018-10-25 09:46:20
我希望这能帮到您...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script> <div> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">Home Content</div> <div role="tabpanel" class="tab-pane" id="profile">Profile Content</div> </div> </div>
解决方案2
0 已采纳 2018-10-25 09:49:47
如果要将选定的选项卡按钮移动到第一位置，则可以使用jQuery对象的“ shown.bs.tab”事件和“ .prepend”方法。
您需要的是：
$(document).ready(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var $myLi = $(this).parent();
$myLi.parent().prepend($myLi);
});
})
这将在DOM中移动活动Li节点。
这是一个工作示例： https : //codepen.io/DanieleAlessandra/pen/BqvybV
如何设置引导标签的高度和边框？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.