BootStrap複数のアクティブなナビタブ問題

Question

マイページには2セットの<ul>要素があります。動作していますが、今問題は同時に2つのタブがアクティブになることです。 tab-3をクリックしてからtab-aをクリックしたとします。タブはtab-aに切り替わりますが、両方ともアクティブ状態になります。これをどうすれば解決できますか？

<div> 
    <div class="hr-text hr-text-left m-t-2 m-b-1"><h6><strong>List 1</strong></h6></div> 
    <ul class="nav nav-pills nav-stacked"> 
     <li role="presentation" class="active"><a data-target="#tab-1" data-toggle="tab">1</a></li> 
     <li role="presentation"><a data-target="#tab-2" data-toggle="tab">2</a></li> 
     <li role="presentation"><a data-target="#tab-3" data-toggle="tab">3</a></li> 
    </ul> 

    <div class="hr-text hr-text-left m-t-2 m-b-1"><h6><strong>List 2</strong></h6></div> 
    <ul class="nav nav-pills nav-stacked"> 
     <li role="presentation" class=""><a data-target="#tab-a" data-toggle="tab">A</a></li> 
     <li role="presentation"><a data-target="#tab-b" data-toggle="tab">B</a></li> 
     <li role="presentation"><a data-target="#tab-c" data-toggle="tab">C</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div class="tab-pane" id="tab-1"><h1>1</h1></div> 
    <div class="tab-pane" id="tab-2"><h1>2</h1></div> 
    <div class="tab-pane" id="tab-3"><h1>3</h1></div> 
    <div class="tab-pane" id="tab-a"><h1>A</h1></div> 
    <div class="tab-pane" id="tab-b"><h1>B</h1></div> 
    <div class="tab-pane" id="tab-c"><h1>C</h1></div> 
    </div> 
</div> 

Answer 1

だけで以下のようにあなたのhtmlを変更：

<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/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div> 
 
    <div class="hr-text hr-text-left m-t-2 m-b-1"> 
 
    <h6><strong>List 1</strong></h6> 
 
    </div> 
 
    <ul class="nav nav-pills nav-stacked"> 
 
    <li role="presentation" class="active"><a data-target="#tab-1" data-toggle="tab">1</a></li> 
 
    <li role="presentation"><a data-target="#tab-2" data-toggle="tab">2</a></li> 
 
    <li role="presentation"><a data-target="#tab-3" data-toggle="tab">3</a></li> 
 

 
    <li><h6><strong>List 2</strong></h6></li> 
 

 
    <li role="presentation" class=""><a data-target="#tab-a" data-toggle="tab">A</a></li> 
 
    <li role="presentation"><a data-target="#tab-b" data-toggle="tab">B</a></li> 
 
    <li role="presentation"><a data-target="#tab-c" data-toggle="tab">C</a></li> 
 
    </ul> 
 

 
    <div class="tab-content"> 
 
    <div class="tab-pane" id="tab-1"> 
 
     <h1>1</h1> 
 
    </div> 
 
    <div class="tab-pane" id="tab-2"> 
 
     <h1>2</h1> 
 
    </div> 
 
    <div class="tab-pane" id="tab-3"> 
 
     <h1>3</h1> 
 
    </div> 
 
    <div class="tab-pane" id="tab-a"> 
 
     <h1>A</h1> 
 
    </div> 
 
    <div class="tab-pane" id="tab-b"> 
 
     <h1>B</h1> 
 
    </div> 
 
    <div class="tab-pane" id="tab-c"> 
 
     <h1>C</h1> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

BootStrap Reference

JsFiddle

タブを非アクティブにするには、CSSクラスが削除されます。curActiveNav.removeClass('active')

好まれる非アクティブマークするAPIの方法がある場合。

$(document).ready(function(){ 
 

 
\t function unactiveOther(source){ 
 
    \t // Source element 
 
    var $sourceTabLink = $(source), 
 
    \t $sourceTab = $sourceTabLink.parent('li'); 
 
     
 
    \t // wrapper element 
 
    var activeNav = $sourceTab.closest('.multipleTabNav') 
 
    \t // find all active 
 
    \t .find('[role=presentation].active'); 
 
    
 
    activeNav.each(function(){ 
 
    \t 
 
     // Get current active nav 
 
     var curActiveNav = $(this), 
 
     \t curActiveNavLink = curActiveNav.find('a'); 
 
     
 
     // inactive unmatched nav 
 
     if (curActiveNavLink.attr('data-target') !== $sourceTabLink.attr('data-target')){ 
 
     \t curActiveNav.removeClass('active'); 
 
     } 
 
     
 
    }) 
 
    } 
 
    
 
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
 
    //console.log(e.target); // newly activated tab 
 
    //console.log(e.relatedTarget);// previous active tab 
 
    unactiveOther(e.target); 
 
    }) 
 
});

<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/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="multipleTabNav"> 
 
    <div class="hr-text hr-text-left m-t-2 m-b-1"><h6><strong>List 1</strong></h6></div> 
 
    <ul class="nav nav-pills nav-stacked"> 
 
     <li role="presentation" class="active"><a data-target="#tab-1" data-toggle="tab">1</a></li> 
 
     <li role="presentation"><a data-target="#tab-2" data-toggle="tab">2</a></li> 
 
     <li role="presentation"><a data-target="#tab-3" data-toggle="tab">3</a></li> 
 
    </ul> 
 

 
    <div class="hr-text hr-text-left m-t-2 m-b-1"><h6><strong>List 2</strong></h6></div> 
 
    <ul class="nav nav-pills nav-stacked"> 
 
     <li role="presentation" class=""><a data-target="#tab-a" data-toggle="tab">A</a></li> 
 
     <li role="presentation"><a data-target="#tab-b" data-toggle="tab">B</a></li> 
 
     <li role="presentation"><a data-target="#tab-c" data-toggle="tab">C</a></li> 
 
    </ul> 
 

 
    <div class="tab-content"> 
 
    <div class="tab-pane" id="tab-1"><h1>1</h1></div> 
 
    <div class="tab-pane" id="tab-2"><h1>2</h1></div> 
 
    <div class="tab-pane" id="tab-3"><h1>3</h1></div> 
 
    <div class="tab-pane" id="tab-a"><h1>A</h1></div> 
 
    <div class="tab-pane" id="tab-b"><h1>B</h1></div> 
 
    <div class="tab-pane" id="tab-c"><h1>C</h1></div>  
 
    </div> 
 
    
 
</div>