ブートストラップのピルタブは動作しません

jQueryセクションを修正する必要がありますか？

IdとHrefは真ですが動作しません。錠剤の挙動を実装

$('#v-pills-tab a').on('click', function (e) { 
 
      e.preventDefault(); 
 
      $('#v-pills-tab a[href="#v-pills-home"]').tab('show'); 
 
     }); 
 
     $('#v-pills-tab a').on('click', function (e) { 
 
      e.preventDefault(); 
 
      $('#v-pills-tab a[href="#v-pills-profile"]').tab('show'); 
 
     });

<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> 
 
     <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a> 
 
     <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a> 
 
    </div> 
 
    <div class="tab-content" id="v-pills-tabContent"> 
 
     <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">home</div> 
 
     <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">profile</div> 
 
    </div>

出典

2017-12-15 Black_Hammer

この方法は、このブートストラップ機能を使用することを意図していた方法から外れます。ただし、Webアクセシビリティのマークアップは+1です。

ほとんどの場合、プラグアンドプレイでなければなりません。

まず、ブートストラップCSSスタイルシートとカスタムJavascriptライブラリを含めます。ブートストラップのカスタムJavascriptライブラリは、jQueryライブラリの後に追加する必要があります。

ナビゲーションピルのJavascriptコードを削除します。適切なマークアップを使用することで、意図した動作が達成されます。

<head> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <ul class="nav flex-column nav-pills" role="tablist" id="v-pills-tab" role="tablist" aria-orientation="vertical"> 
 
    <li role="presentation" class="active"> 
 
     <a class="nav-link active" data-toggle="pill" href="#v-pills-home" role="tab" aria-selected="true" aria-controls="v-pills-home" id="v-pills-home-tab">Home</a> 
 
    </li> 
 
    <li role="presentation"> 
 
     <a class="nav-link" data-toggle="pill" href="#v-pills-profile" role="tab" aria-selected="false" aria-controls="v-pills-profile" id="v-pills-profile-tab">Profile</a> 
 
    </li> 
 
    </ul> 
 
    
 
    <div class="tab-content" id="v-pills-tabContent"> 
 
    <div class="tab-pane fade in active" id="v-pills-home" role="tab-panel" aria-labelledby="v-pills-home-tab">home</div> 
 
    <div class="tab-pane fade" id="v-pills-profile" role="tab-panel" aria-labelledby="v-pills-profile-tab">profile</div> 
 
    </div> 
 
</body>

：

以下の例を参照してください。

出典

2017-12-15 06:42:14

ブートストラップのピルタブは動作しません

答えて

関連する問題