jquery - 左右滑动的选项卡

Question

我制作了一个选项卡，一切正常..但我无法向左/向右滑动。主要是我想滑动动画像 http://www.slidetabs.com/ 。知道怎么做吗？查看我的代码 http://jsfiddle.net/ZXYTW/1/

下面是我的js代码:

initHomeTabs=function(){
    //click Event for all tabs: 
    $('.tabs li').click(function(){
        $(".tab").css('display','none');
        $(".tabs li").removeClass('selected');
        $(this).addClass('selected')
        $('#'+this.childNodes[0].href.split('#')[1]).slideToggle("slow");
        return false;
    })
    //set first tab active
    $('.tabs li').eq(0).click();
}

// call above function on dom ready event
$(document).ready(function(){
    initHomeTabs(); 
});

Answer 1

<强> Demo

试试这个。我已经编辑了你的代码

将其添加到您的 head 标签

 <script type="text/javascript" src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>

jquery

$(document).ready(function(){
$(document).on('click', '.tabs li a ', function () {
    $(".tabs li").removeClass('selected');
    $(this).closest("li").addClass('selected')
    var panel = $(this).data('href');
    $.scrollTo(panel, 400);
});
});

html代码

<div class="content">
    <div id="Appointments" class="tab">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</div>
    <div id="Enews" class="tab">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,.</div>
    <div id="Brochure" class="tab">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</div>
</div>
<ul class="tabs">
    <li><a data-href="#Appointments">Appointments </a>

    </li>
    <li><a data-href="#Enews">Enews </a>

    </li>
    <li><a data-href="#Brochure">Brochure </a>

    </li>
</ul>

样式表

body {
    overflow: hidden;
}
div.content div {
    position: absolute;
    width:100%;
    top:25px;
    left:0px;
}
#Appointments {
    left:0px;
}
#Enews {
    left:100%;
}
#Brochure {
    left:200%;
}
.tabs {
    margin-left:10px;
    position: fixed;
}
.tabs li {
    background:none;
    background:#736c61;
    padding:5px;
    float:left;
    list-style:none
}
.tabs li.selected {
    background:#e3d5af;
    top: -1px;
    position: relative;
}
.tabs li.selected a {
    color:white;
}
.tabs li a {
    color:white;
    text-decoration:none;
    margin-right:15px;
    cursor:pointer;
}
.tab {
    background:#e3d5af;
    color:#312822;

    border: 1px solid #756e64;
}

这是工作 fiddle Demo 。希望这有帮助