Bootstrap中的Tab摺疊4

在我的代碼中，我有bootstrap 4 Tab。我希望所有選項卡內容都會隱藏，當我點擊標籤li然後標籤內容將會顯示。因爲我已經從tab-pane div中刪除活動類，所以現在在第一個內容不顯示，當我點擊選項卡李它顯示然後，但是當我再次單擊該li後它不關閉。Bootstrap中的Tab摺疊4

我想再次點擊標籤li按鈕時，標籤內容應該再次關閉。

<!-- Nav tabs --> 
<ul class="nav nav-tabs" role="tablist"> 
    <li class="nav-item"> 
    <a class="nav-link" data-toggle="tab" href="#home" role="tab">Home</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a> 
    </li> 
</ul> 

<!-- Tab panes --> 
<div class="tab-content"> 
    <div class="tab-pane" id="home" role="tabpanel">A</div> 
    <div class="tab-pane" id="profile" role="tabpanel">B</div> 
    <div class="tab-pane" id="messages" role="tabpanel">C</div> 
    <div class="tab-pane" id="settings" role="tabpanel">D</div> 
</div>

只想當單擊菜單將顯示內容，然後再次單擊菜單時，應該關閉。

幫助我

來源

2017-10-10 Tanmay

是什麼版本？測試版或Alpha – core114

我正在使用bootstrap4 alpha – Tanmay

第二次點擊會發生什麼？「它不關閉」是什麼意思？ –

更新

添加此額外的代碼以再次單擊時刪除活動類。對於使用

$(document).on('click','.nav-link.active', function(){ 
    var href = $(this).attr('href').substring(1); 
    $(this).removeClass('active'); 
    $('.tab-pane[id="'+ href +'"]').removeClass('active'); 
})

$(document).on('click','.nav-link.active', function(){ 
 
    var href = $(this).attr('href').substring(1); 
 
    //alert(href); 
 
    $(this).removeClass('active'); 
 
    $('.tab-pane[id="'+ href +'"]').removeClass('active'); 
 
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" > 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 

 

 

 

 

 

 
<!-- Nav tabs --> 
 
<ul class="nav nav-tabs" role="tablist"> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" data-toggle="tab" href="#home" role="tab">Home</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a> 
 
    </li> 
 
</ul> 
 

 
<!-- Tab panes --> 
 
<div class="tab-content"> 
 
    <div class="tab-pane" id="home" role="tabpanel">A</div> 
 
    <div class="tab-pane" id="profile" role="tabpanel">B</div> 
 
    <div class="tab-pane" id="messages" role="tabpanel">C</div> 
 
    <div class="tab-pane" id="settings" role="tabpanel">D</div> 
 
</div>

來源

2017-10-10 09:25:59 Bhuwan

非常感謝你，我一直在尋找答案 – Tanmay

樂意幫忙:) – Bhuwan

還有一個問題。當您單擊菜單按鈕超過2次時，它不起作用 – Tanmay

現在，它的工作使用以下引導CDN

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" > 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" > 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 

 

 

 

 

 

 
<!-- Nav tabs --> 
 
<ul class="nav nav-tabs" role="tablist"> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" data-toggle="tab" href="#home" role="tab">Home</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a> 
 
    </li> 
 
</ul> 
 

 
<!-- Tab panes --> 
 
<div class="tab-content"> 
 
    <div class="tab-pane" id="home" role="tabpanel">A</div> 
 
    <div class="tab-pane" id="profile" role="tabpanel">B</div> 
 
    <div class="tab-pane" id="messages" role="tabpanel">C</div> 
 
    <div class="tab-pane" id="settings" role="tabpanel">D</div> 
 
</div>

來源

2017-10-10 09:14:37 core114

You粘貼相同的代碼給我，我要求改變..並且它也不起作用 – Tanmay

@坦美請檢查您的CDN' – core114

我希望所有被隱藏，當我點擊李選項卡它應該打開內容。當我再次點擊li時，它應該關閉標籤內容。同樣，第一，第二，第三，第四個菜單項也是如此。 – Tanmay

添加以下引導CDN你的代碼

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" > 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

來源

2017-10-10 09:31:14 Mitesh

Bootstrap中的Tab摺疊4

回答

相關問題