Bootstrap 如何使用滑块箭头激活Twitter引导标签导航控件

1aaf6o9v 于 2022-12-25 发布在 Bootstrap

关注(0)|答案(1)|浏览(164)

我之前问过这个问题，你们帮了我，除了激活的Navtab没有高亮显示之外，一切都正常。例如，如果我按Tab 2，该选项卡将高亮显示，滑块将滑动到幻灯片2。但如果我只是使用转盘从幻灯片1滑动到幻灯片2，Tab 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>

twitter-bootstrap

来源：https://stackoverflow.com/questions/34440453/how-to-use-slider-arrows-to-activate-twitter-bootstrap-tabnav-controls

1条答案

按热度按时间

wribegjk1#

// 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');
  }
});

完整工作示例如下：
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2022-12-25

我来回答

Bootstrap 如何使用滑块箭头激活Twitter引导标签导航控件

1条答案

相关问题

热门标签

最新问答