Question

我的页面中有两组Robot * robot = new Robot(); //work well!元素。它工作正常，但现在问题是同时有两个标签处于活动状态。假设我点击<ul>然后点击tab-3。该选项卡将切换到tab-a，但现在它们都将处于活动状态。我该如何解决这个问题？

tab-a

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(){

	function unactiveOther( source ){
  	// Source element
    var $sourceTabLink = $(source),
    	$sourceTab = $sourceTabLink.parent('li');
        
  	// wrapper element
    var activeNav = $sourceTab.closest('.multipleTabNav')
    	// find all active
    	.find('[role=presentation].active');
    
    activeNav.each( function(){
    	
      // Get current active nav
      var curActiveNav = $(this),
      	curActiveNavLink = curActiveNav.find('a');
      
      // inactive unmatched nav
      if ( curActiveNavLink.attr('data-target') !== $sourceTabLink.attr('data-target') ){
      	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>

BootStrap多个Active Nav选项卡问题

2 个答案: