ブートストラップのタブ崩壊4

私のコードにはブートストラップが4つあります。タブをクリックします。まず、タブliをクリックするとタブ内容が非表示になり、タブ内容が表示されます。そのため、タブ区域のdivからアクティブなクラスを削除しましたので、最初は内容が表示されず、タブliをクリックすると表示されますが、そのliを再度クリックすると閉じません。ブートストラップのタブ崩壊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

バージョンを使用するために？ベータまたはアルファ – core114

私はbootstrap4アルファ – Tanmay

を使用しています2番目のクリックで何が起こるはずですか？ 'それは閉じないで'あなたはどういう意味ですか？ –

を次の作業使用は更新

この追加コードを追加して、クリック時にアクティブなクラスをもう一度削除します。

$(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

私が変更を求めている同じコードを貼り付けた。また、それもうまくいきません。 – Tanmay

@Tanmayあなたの 'CDN'を確認してください。 – core114

私はすべてliのタブをクリックするとコンテンツを開くはずです。そして、私が再びliをクリックすると、タブの内容を閉じなければなりません.sameは1,2,3、4番目のメニュー項目になります。 – 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

ブートストラップのタブ崩壊4

答えて

関連する問題