替换引导标签中的标签不仅边框
[英]replacement of tabs in bootstrap tabs not only border
问题描述
Following code is for the bootstrap tab, in this the active tab has the border and show their tab respectively, but I want when any person clicks on the second tab the first tab is replaced by the second tab, and when a person clicks on the third tab the first tab is replaced by the third tab. 
以下代码用于引导程序选项卡，在此活动选项卡具有边框并分别显示其选项卡，但是我想当任何人单击第二个选项卡时，第一个选项卡由第二个选项卡替换，并且当某人单击时第三个标签页第一个标签页被第三个标签页替换。 Can anyone show me how can I achieve that? 谁能告诉我如何实现？
Here is the code snippet: 这是代码片段：
<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
I hope this will help you... 我希望这能帮到您...
<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
If you want to move the selected tab button in first position you may use the "shown.bs.tab" event and the ".prepend" method of jQuery objects. 如果要将选定的选项卡按钮移动到第一位置，则可以使用jQuery对象的“ shown.bs.tab”事件和“ .prepend”方法。
All you need is this: 您需要的是：
$(document).ready(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var $myLi = $(this).parent();
$myLi.parent().prepend($myLi);
});
})
This moves the active Li node in DOM. 这将在DOM中移动活动Li节点。
Here is a working example: https://codepen.io/DanieleAlessandra/pen/BqvybV 这是一个工作示例： https : //codepen.io/DanieleAlessandra/pen/BqvybV
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.