如何使用滑块箭头激活 Twitter Bootstrap tabnav 控件
How to use slider arrows to activate Twitter Bootstrap tabnav controls
我之前问过这个问题，你们帮助了我，除了激活的 Navtab 没有高亮显示之外，一切正常。
例如，如果我按选项卡 2，选项卡将突出显示，滑块将滑动到幻灯片 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>
// 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>
你还欠我一个Minimal, Complete, and Verifiable example。只是在开玩笑。 :)
圣诞快乐！
我之前问过这个问题，你们帮助了我，除了激活的 Navtab 没有高亮显示之外，一切正常。 例如，如果我按选项卡 2，选项卡将突出显示，滑块将滑动到幻灯片 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>
// 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>
你还欠我一个Minimal, Complete, and Verifiable example。只是在开玩笑。 :)
圣诞快乐！