Question

我试过找到问题的答案，但没有成功。我发现了这个例子：jquery ui tabs slide left and right但它没有为我做。

我有一个有三个标签的工作“标签部分”（你可以看到下面的代码）。

我想要实现的是当您按下从右侧滑入的下一个标签替换另一个标签时，当前标签向左滑动（如果您在标签中“向后”，则向右滑动）。 / p>

请看这个很棒的例子：See this tab effect。

我的HTML：

<ul class="tabs">
    <li class="tab-link current" data-tab="tab-1">Daniel Pettersson</li>
    <li class="tab-link" data-tab="tab-2">Scott Asli</li>
    <li class="tab-link" data-tab="tab-3">Teamet</li>
</ul>

    <div id="tab-1" class="tab-content current">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
    <div id="tab-2" class="tab-content">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
    <div id="tab-3" class="tab-content">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>

CSS：

ul.tabs {
    margin: 0px;
    padding: 0px;
    list-style: none;
    background: #3b3b3b;
}
ul.tabs li {
    background: none;
    color: #b1b1b1;
    display: inline-block;
    padding: 10px 25px;
    cursor: pointer;
}
ul.tabs li.current {
    color: #fff;
    background: url('images/tab-arrow.png') no-repeat 50% 100%;
}
.tab-content {
    display: none;
    background: transparent;
    padding: 30px 0;
    height:300px;
}
.tab-content.current { display: inherit; }

和jQuery：

$(document).ready(function(){

    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })

})

我需要做些什么来实现这个目标？

非常感谢任何帮助！感谢。

编辑：我在示例页面上发现了这个具有我想要的效果的js代码：

//slide the button to the next item
function goNext() {
    if ( decount != counter) {
    $('#slider ul').animate({ left: '-=' + $('#slider').width() }, 400, 'swing', function() { });
    $('.active').removeClass('active').next().addClass('active');
    decount++;
    window.location.hash = decount;
    }
}

function goBack() {
    if ( decount != 1) {
    $('#slider ul').animate({ left: '+=' + $('#slider').width() }, 400, 'swing', function() { });
    $('.active').removeClass('active').prev().addClass('active');
    decount--;
    window.location.hash = decount;
    }
}

这可能是解决方案吗？我不擅长jQuery所以我不知道如何将它添加到我目前的代码中..

Answer 1

我认为您正在寻找的是jQuery animate

将当前选项卡滑到左侧，然后从右侧滑动下一个选项卡

1 个答案: