Next-Previous按钮使用Bootstrap Tab在循环中工作

Question

目前“上一页”按钮在第一个标签中不起作用，因为它不在循环中。我该如何设置它以便当我的访问者点击上一个时，它会显示最后一个标签？

HTML：

<div>
    <ul id="wheel-tab" class="nav nav-tabs nav-justified">
        <li class="active"><a href="#ocean" data-toggle="tab">Ocean</a></li>
        <li><a href="#air" data-toggle="tab">Air</a></li>
        <li><a href="#customs" data-toggle="tab">Customs</a></li>
        <li><a href="#transport" data-toggle="tab">Transport</a></li>
    </ul>
    <div class="tab-content">
        <div id="ocean" class="tab-pane fade in active">
            <h2>Ocean</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="air" class="tab-pane fade in active">
            <h2>Air</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="customs" class="tab-pane fade in active">
            <h2>Customs</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="transport" class="tab-pane fade in active">
            <h2>Transport</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
    <a class="left carousel-control" href="#" id="wheel-left"role="button" data-slide="prev">
        <span class="icon icon-left">Prev</span>
    </a>
    <a class="right carousel-control" href="#" id="wheel-right" role="button" data-slide="prev">
        <span class="icon icon-right">Next</span>
    </a>
</div>

JS：

var $tabs = $('#wheel-tab li');

$('#wheel-left').on('click', function () {
    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
});

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

DEMO

Answer 1

尝试以下方法：

使用:first和:last测试是否为列表中的最后/第一项，如果它显示第一个/最后一个标签

var $tabs = $('#wheel-tab li');

    $('#wheel-left').on('click', function () {
        if($('.active').is('#wheel-tab li:first')) {
            $('#wheel-tab li:last').find('a[data-toggle="tab"]').tab('show');
        } else {
        $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
        }
    });

    $('#wheel-right').on('click', function () {
     if($('.active').is('#wheel-tab li:last')) {
            $('#wheel-tab li:first').find('a[data-toggle="tab"]').tab('show');
        } else {
        $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
        }
    });

https://jsfiddle.net/pc28q6wa/

或：

var $tabs = $('#wheel-tab li');
var first = $('#wheel-tab li:first');
var last = $('#wheel-tab li:last');

$('#wheel-left').on('click', function () {
    if($('.active').is(first)) {
        last.find('a[data-toggle="tab"]').tab('show');
    } else {
    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
    }
});

$('#wheel-right').on('click', function () {
 if($('.active').is(last)) {
       first.find('a[data-toggle="tab"]').tab('show');
    } else {
    $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
    }
});

Answer 2

您可以添加与prev和next相关的长度检查，如果它存在，只需继续正常的其他内容，分别切换last/first标签。看看下面的解决方案，并通过评论：

$('#wheel-left').on('click', function() {
    var prevLen = $tabs.filter('.active').prev('li').length; //check if prev li is present
    if (prevLen)
        $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');//if yes then continue with normal tab switch
    else
        $tabs.filter('li:last').find('a[data-toggle="tab"]').tab('show');//else show the last tab
});

$('#wheel-right').on('click', function() {
    var nextLen = $tabs.filter('.active').next('li').length;//check if next li is present
    if (nextLen)
        $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');//if yes then continue with normal tab switch
    else
        $tabs.filter('li:first').find('a[data-toggle="tab"]').tab('show');//else show the first tab
});

<强>

的 Updated Fiddle

Answer 3

我已经尝试过这段代码，它对我来说非常有用。看看它。

$('#wheel-left').on('click', function () {

if($tabs.filter('.active').prev('li').is('li') > 0) {
    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');    
}
else{
    $tabs.last().tab('show');    
}
 });

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

由于