替換引導標簽中的標簽不僅邊框
[英]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.