html - 如何使用 slider 箭头激活 Twitter Bootstrap tabnav 控件

Question

我之前问过这个问题，你们帮助了我，除了激活的 Navtab 没有高亮显示之外，一切正常。例如，如果我按选项卡 2，选项卡将突出显示， slider 将滑动到幻灯片 2。但是，如果我只是使用旋转木马从幻灯片 1 滑动到幻灯片 2，则选项卡 1 会保持高亮状态。非常感谢你们太棒了

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ul class="nav nav-tabs alt-font text-uppercase letter-spacing-1 no-border font-weight-600 text-center" role="tablist">
    <li id="tab1" data-target="#myCarousel" data-slide-to="0" class="active"><a href="#tab1" role="tab" data-toggle="tab" class="xs-display-inline ">Tab 1</a>
    </li>
    <li id="tab2" data-target="#myCarousel" data-slide-to="1"><a href="#tab2" role="tab" data-toggle="tab" class="xs-display-inline ">Tab 2</a>
    </li>
    <li id="tab3" data-target="#myCarousel" data-slide-to="2"><a href="#tab3" role="tab" data-toggle="tab" class="xs-display-inline ">Tab 3</a>
    </li>
  </ul>
  <div class="tab-content clearfix">
    <div class="carousel-inner" role="listbox">
      <!-- slider item-->
      <div class="item active" role="listbox">
        <row>
          <div class="col-md-5 col-sm-6 pull-left">
            <img src="Slide1Picture">
          </div>
          <div class="col-md-5 col-sm-6 pull-right">Slide 1
          </div>
        </row>
      </div>
      <!-- slider item-->
      <div class="item">
        <row>
          <div class="col-md-5 col-sm-6 pull-right">
            <img src="Slide2Picture">
          </div>
          <div class="col-md-5 col-sm-6 pull-right">Slide 2
          </div>
        </row>
      </div>
      <!-- slider item-->
      <div class="item">
        <row>
          <div class="col-md-5 col-sm-6 pull-left">
            <img src="Slide3Picture">
          </div>
          <div class="col-md-5 col-sm-6 pull-right">Slide 3
          </div>
        </row>
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

Answer 1

// store tab controls in a variable ($tabs)
// we will use .tab('show') on their containing links when slider arrows are clicked
var $tabs = $('#myCarousel>.nav-tabs>li');

// when data-slide="next" is clicked
$('[data-slide="next"]').on('click', function() {

  // if there is a $tabs after the class="active" one
  if ($tabs.filter('.active').next('li').length) {

    // .tab('show') its link 
    $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');

  } else {

    // else .tab('show') first $tabs link
    $tabs.eq(0).find('a[data-toggle="tab"]').tab('show');
  }
});

// when data-slide="prev" is clicked
$('[data-slide="prev"]').on('click', function() {

  // if there is a $tabs before the class="active" one 
  if ($tabs.filter('.active').prev('li').length) {

    // .tab('show') its link 
    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');

  } else {

    // else .tab('show') last $tabs link
    $tabs.eq($tabs.length - 1).find('a[data-toggle="tab"]').tab('show');
  }
});

这里是完整的工作示例:

var $tabs = $('#myCarousel>.nav-tabs>li');
$('[data-slide="next"]').on('click', function() {
  if ($tabs.filter('.active').next('li').length) {
    $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
} else {
    $tabs.eq(0).find('a[data-toggle="tab"]').tab('show');
  }
});
$('[data-slide="prev"]').on('click', function() {
  if ($tabs.filter('.active').prev('li').length) {
    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
  } else {
    $tabs.eq($tabs.length - 1).find('a[data-toggle="tab"]').tab('show');
  }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<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.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ul class="nav nav-tabs alt-font text-uppercase letter-spacing-1 no-border font-weight-600 text-center" role="tablist">
    <li id="tab1" data-target="#myCarousel" data-slide-to="0" class="active"><a href="#tab1" role="tab" data-toggle="tab" class="xs-display-inline ">Tab 1</a>
    </li>
    <li id="tab2" data-target="#myCarousel" data-slide-to="1"><a href="#tab2" role="tab" data-toggle="tab" class="xs-display-inline ">Tab 2</a>
    </li>
    <li id="tab3" data-target="#myCarousel" data-slide-to="2"><a href="#tab3" role="tab" data-toggle="tab" class="xs-display-inline ">Tab 3</a>
    </li>
  </ul>
  <div class="tab-content clearfix">
    <div class="carousel-inner" role="listbox">
      <!-- slider item-->
      <div class="item active" role="listbox">
        <div class="row">
          <div class="col-md-5 col-sm-6 pull-right">Slide 1
          </div>
          <div class="col-md-5 col-sm-6 pull-left">
            <img src="https://s-media-cache-ak0.pinimg.com/736x/e5/ac/a2/e5aca2429cf6b0c13dfc618f7c57c3f0.jpg">
          </div>
        </div>
      </div>
      <!-- slider item-->
      <div class="item">
        <div class="row">
          <div class="col-md-5 col-sm-6 pull-right">Slide 2
          </div>
          <div class="col-md-5 col-sm-6 pull-right">
            <img src="http://rlv.zcache.com/i_love_htmls_business_card_holders-r8e1a329b030d41ea9c04c1cbfeb89e90_zh5vb_324.jpg">
          </div>
        </div>
      </div>
      <!-- slider item-->
      <div class="item">
        <div class="row">
          <div class="col-md-5 col-sm-6 pull-right">Slide 3
          </div>
          <div class="col-md-5 col-sm-6 pull-left">
            <img src="http://rlv.zcache.com/i_heart_html_tags_toothbrush_holder-r589d5af5980e43809f0afc3cf05aa049_zh5wb_324.jpg">
          </div>
        </div>
      </div>

      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>