Bootstrap选项卡在Next和Prev Button上移动

时间：2017-11-01 09:03:35

标签： jquery html css

我需要在点击next和prev按钮时移动引导标签，并隐藏第一个标签prev按钮，隐藏最后一个标签next按钮，我是新手jquery和我已经尝试了很多，但我无法做到这一点

a.btn-left, a.btn-right {
  display:inline-block;
  padding:5px 10px;
  font-size:24px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
        <li><a data-toggle="tab" href="#menu1">About</a></li>
        <li><a data-toggle="tab" href="#menu2">Cases</a></li>
        <li><a data-toggle="tab" href="#menu3">Experience</a></li>
    </ul>
    <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
            <h3>HOME</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="menu1" class="tab-pane fade">
            <h3>Menu 1</h3>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div id="menu2" class="tab-pane fade">
            <h3>Menu 2</h3>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
        </div>
        <div id="menu3" class="tab-pane fade">
            <h3>Menu 3</h3>
            <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
        <div class="pull-right pagination">
            <a class="btn-left"><i class="fa fa-arrow-circle-left"></i></a>
            <a class="btn-right"><i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
</div>

4 个答案:

答案 0 :(得分：2)

您可以在jquery

中使用next()和prev()来完成此操作 

 $('.btn-right').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

  $('.btn-left').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
a.btn-left,a.btn-right
    {
        display:inline-block;
        padding:5px 10px;
        font-size:24px;
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">About</a></li>
    <li><a data-toggle="tab" href="#menu2">Cases</a></li>
    <li><a data-toggle="tab" href="#menu3">Experience</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
    <div class="pull-right pagination">
        <a class="btn-left"><i class="fa fa-arrow-circle-left"></i></a>
        <a class="btn-right"><i class="fa fa-arrow-circle-right"></i></a>
    </div>
  </div>
</div>

答案 1 :(得分：1)

使用此功能，您可以执行此操作，也可以在单击选项卡

时执行此操作 

var $tabs = $('ul.nav li');

//Next Prev Navigation - Checking When Page Load
var active = $('ul.nav li.active').index();
var tabsLength = $("ul.nav li").length;
if (active == 0) {
    $(".btn-left").hide();
} else if (active == (tabsLength - 1)) {
    $(".btn-right").hide();
} else {
    $(".btn-left").show();
    $(".btn-right").show();
}

//Next Prev Navigation - Clicking on Icon to Move to Tabs
$('.btn-left').on('click', function () {
    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
});

$('.btn-right').on('click', function () {
    $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
});

//Next Prev Navigation - Changing Tabs - Next and Prev Handling
$('.btn-left,.btn-right').on('click', function () {
    var active = $('ul.nav li.active').index();
    var tabsLength = $("ul.nav li").length;
    if (active == 0) {
        $(".btn-left").hide();
    } else if (active == (tabsLength - 1)) {
        $(".btn-right").hide();
    } else {
        $(".btn-left").show();
        $(".btn-right").show();
    }
});

//Next Prev Navigation - Clicking Tabs - Next and Prev Handling
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $(".btn-left").show();
    $(".btn-right").show();
    e.target;
    var active = $(e.target).closest('li').index();
    var tabsLength = $("ul.nav li").length;
    if (active == 0) {
        $(".btn-left").hide();
    } else if (active == (tabsLength - 1)) {
        $(".btn-right").hide();
    } else {
        $(".btn-left").show();
        $(".btn-right").show();
    }
});
a.btn-left, a.btn-right {
  display:inline-block;
  padding:5px 10px;
  font-size:24px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
        <li><a data-toggle="tab" href="#menu1">About</a></li>
        <li><a data-toggle="tab" href="#menu2">Cases</a></li>
        <li><a data-toggle="tab" href="#menu3">Experience</a></li>
    </ul>
    <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
            <h3>HOME</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="menu1" class="tab-pane fade">
            <h3>Menu 1</h3>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div id="menu2" class="tab-pane fade">
            <h3>Menu 2</h3>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
        </div>
        <div id="menu3" class="tab-pane fade">
            <h3>Menu 3</h3>
            <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
        <div class="pull-right pagination">
            <a class="btn-left"><i class="fa fa-arrow-circle-left"></i></a>
            <a class="btn-right"><i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
</div>

答案 2 :(得分：1)

  

更新：修复了标签点击问题

您可以通过比较nav-tabs>li length和index()值来实现此目的，以根据您的要求获取按钮的隐藏效果。

请参阅以下代码：

＆＃13;
＆＃13; 
$('.btn-left').css('visibility','hidden');

$('.btn-right').click(function(){
    $('.nav-tabs > .active').next('li').find('a[data-toggle="tab"]').tab('show');
    if($('.nav-tabs li.active').index()>=($('.nav-tabs li').length-1)){
        $(this).css('visibility','hidden');
    }
    else{
        $('.btn-left').css('visibility','visible');
    }
});

$('.btn-left').click(function(){
    $('.nav-tabs > .active').prev('li').find('a[data-toggle="tab"]').tab('show');
    if($('.nav-tabs li.active').index()<=0){
        $(this).css('visibility','hidden');
    }
    else{
        $('.btn-right').css('visibility','visible');
    }
});

$('.nav-tabs>li').on('click', function(){
    if($(this).index()===0){
        $('.btn-left').css('visibility','hidden');
    }
    else if($(this).index()>=($('.nav-tabs li').length-1)){
        $('.btn-right').css('visibility','hidden');
    }
    else{
        $('.btn-left').css('visibility','visible');
        $('.btn-right').css('visibility','visible');
    }
})
＆＃13; 
a.btn-left, a.btn-right{
  display:inline-block;
  padding:5px 10px;
  font-size:24px;
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
        <li><a data-toggle="tab" href="#menu1">About</a></li>
        <li><a data-toggle="tab" href="#menu2">Cases</a></li>
        <li><a data-toggle="tab" href="#menu3">Experience</a></li>
    </ul>
    <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
            <h3>HOME</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="menu1" class="tab-pane fade">
            <h3>Menu 1</h3>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div id="menu2" class="tab-pane fade">
            <h3>Menu 2</h3>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
        </div>
        <div id="menu3" class="tab-pane fade">
            <h3>Menu 3</h3>
            <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
        <div class="pull-right pagination">
            <a class="btn-left"><i class="fa fa-arrow-circle-left"></i></a>
            <a class="btn-right"><i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

试试这个。

$('.btn-right').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

  $('.btn-left').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
a.btn-left,a.btn-right{
  display:inline-block;
  padding:5px 10px;
  font-size:24px;
}
.tab_desc {
  min-height: 100px; /** as you want **/
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">

    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
        <li><a data-toggle="tab" href="#menu1">About</a></li>
        <li><a data-toggle="tab" href="#menu2">Cases</a></li>
        <li><a data-toggle="tab" href="#menu3">Experience</a></li>
    </ul>

    <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
            <div class="tab_desc">
                <h3>HOME</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <div class="pull-right pagination">
                <a class="btn-right" id="btnNext"><i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div id="menu1" class="tab-pane fade">
            <div class="tab_desc">
                <h3>Menu 1</h3>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="pull-right pagination">
                <a class="btn-left"><i class="fa fa-arrow-circle-left"></i></a>
                <a class="btn-right"><i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div id="menu2" class="tab-pane fade">
            <div class="tab_desc">
                <h3>Menu 2</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
            </div>
            <div class="pull-right pagination">
                <a class="btn-left"><i class="fa fa-arrow-circle-left"></i></a>
                <a class="btn-right"><i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div id="menu3" class="tab-pane fade">
            <div class="tab_desc">
                <h3>Menu 3</h3>
                <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
            </div>
            <div class="pull-right pagination">
                <a class="btn-left"><i class="fa fa-arrow-circle-left"></i></a>
            </div>
        </div>
    </div>
</div>

相关问题
最新问题