Cyclical选项卡

Question

我正在使用jQuery选项卡为我正在处理的一个项目创建一个独特的用户界面，但我在让它们做我需要它们做的事情上遇到了一些麻烦。

布局：

​

沿着顶部运行的年份将是标签。

我尝试做的是这样的:当用户点击某一年，例如2009年，该选项卡将滑过成为中心选项卡(以及其内容)，前几年的新选项卡将添加到左侧，多余的选项卡将从右侧删除。因此，最终将有相同数量的选项卡，所选年份位于中心。

我觉得我使用jQuery的经验不足以做到这一点。我该如何实现这种功能呢？

到目前为止的代码：

$(function() {
    $( "#tabs" ).tabs({selected: 3});//just selects the center tab(probably needs to be changed)
    $( "#tabs" ).tabs({
           select: function(event, ui) {
                    var year = $(".year").val();
                    //figure how many tabs are left and right (year - selected year)
                    //delete and add tabs
                    //change class of selected tab
               }
        });
});

我有几个笔记，在我认为它可能需要去的时候，这是一个关于这个过程的想法。

<div class='navBar' id='tabs'>
<ul>
    <li class='navElement'><a href="post.php?year=<?php echo($year-3);?>"><?php echo($year-3);?></a></li>
    <li class='navElement'><a href="post.php?year=<?php echo($year-2);?>"><?php echo($year-2);?></a></li>
    <li class='navElement'><a href="post.php?year=<?php echo($year-1);?>"><?php echo($year-1);?></a></li>
    <li class='navFocus'><a href="post.php?year=<?php echo($year);?>"><?php echo($year);?></a></li>
    <li class='navElement'><a href="post.php?year=<?php echo($year+1);?>"><?php echo($year+1);?></a></li>
    <li class='navElement'><a href="post.php?year=<?php echo($year+2);?>"><?php echo($year+2);?></a></li>
    <li class='navElement'><a href="post.php?year=<?php echo($year+3);?>"><?php echo($year+3);?></a></li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
<div id="tabs-3"></div>
<div  id="tabs-4"></div>
<div id="tabs-5"></div>
<div id="tabs-6"></div>
<div id="tabs-7"></div>
</div>

Answer 1

我也会跳过jQuery UI选项卡。到目前为止，实际的选项卡功能并不是这里最大的问题。

这是一个开始：http://jsfiddle.net/8aGC4/2/，但需要对您的部分进行一些调整。不过，希望它能帮助您入门。

如果代码不够清楚，请随时询问！

HTML

<nav class="tabs">
    <ul>
        <li><a href="#year-2000">2000</a></li><li><a href="#year-2001">2001</a></li><li><a href="#year-2002">2002</a></li><li><a href="#year-2003">2003</a></li><li><a href="#year-2004">2004</a></li><li><a href="#year-2005">2005</a></li><li><a href="#year-2006">2006</a></li><li><a href="#year-2007">2007</a></li><li><a href="#year-2008">2008</a></li><li><a href="#year-2009">2009</a></li><li><a href="#year-2010">2010</a></li><li><a href="#year-2011">2011</a></li><li><a href="#year-2012">2012</a></li><li><a href="#year-2013">2013</a></li><li><a href="#year-2014">2014</a></li><li><a href="#year-2015">2015</a></li><li><a href="#year-2016">2016</a></li><li><a href="#year-2017">2017</a></li><li><a href="#year-2018">2018</a></li><li><a href="#year-2019">2019</a></li><li><a href="#year-2020">2020</a></li>
    </ul>
</nav>

<div class="tab-content">
    <div id="year-2000">2000 - Lorem ipsum dolor</div>
    <div id="year-2001">2001 - Lorem ipsum dolor</div>
    <div id="year-2002">2002 - Lorem ipsum dolor</div>
    <div id="year-2003">2003 - Lorem ipsum dolor</div>
    <div id="year-2004">2004 - Lorem ipsum dolor</div>
    <div id="year-2005">2005 - Lorem ipsum dolor</div>
    <div id="year-2006">2006 - Lorem ipsum dolor</div>
    <div id="year-2007">2007 - Lorem ipsum dolor</div>
    <div id="year-2008">2008 - Lorem ipsum dolor</div>
    <div id="year-2009">2009 - Lorem ipsum dolor</div>
    <div id="year-2010">2010 - Lorem ipsum dolor</div>
    <div id="year-2011">2011 - Lorem ipsum dolor</div>
    <div id="year-2012">2012 - Lorem ipsum dolor</div>
    <div id="year-2013">2013 - Lorem ipsum dolor</div>
    <div id="year-2014">2014 - Lorem ipsum dolor</div>
    <div id="year-2015">2015 - Lorem ipsum dolor</div>
    <div id="year-2016">2016 - Lorem ipsum dolor</div>
    <div id="year-2017">2017 - Lorem ipsum dolor</div>
    <div id="year-2018">2018 - Lorem ipsum dolor</div>
    <div id="year-2019">2019 - Lorem ipsum dolor</div>
    <div id="year-2020">2020 - Lorem ipsum dolor</div>
</div>

CSS

body {
    font: 12px/1.2 Arial, sans-serif;
    color: #666;
}

nav.tabs {
    width: 630px;
    margin: 0 auto;
    overflow: hidden;
}

    nav.tabs ul {
        margin: 0;
        padding: 0;
        list-style: none;
        white-space: nowrap;
    }

        nav.tabs ul li {
            display: inline-block;
            margin: 0;
            font-size: 0;
        }

            nav.tabs ul li a {
                background: #f6f6f6;

                display: block;
                width: 58px;
                padding: 5px;

                color: #666;
                text-align: center;
                font-size: 12px;

                border-left: 1px solid #fefefe;
                border-right: 1px solid #f0f0f0;
            }

div.tab-content {
    width: 210px;
    margin: 0 auto;
}

    div.tab-content div {
        background: #f6f6f6;
        display: none;
        padding: 5px;
    }

JS

$(function () {
    var tabs = $('nav.tabs a');
    var tabContent = $('div.tab-content > div');

    tabs.click(function () {
        // Hide and deselect previous tab
        tabs.filter('.active').removeClass('active').animate({width: '58px'}, 100);
        tabContent.slideUp(100);

        // Select and show this tab
        var tab = $(this);

        tab.addClass('active').animate({width: '198px'}, 100);
        $(tab.attr('href')).slideDown(100);

        // Scroll tab container so that current tab is centered
        var currentTab = tabs.index(tab);

        // 3 = num tabs to the left of selected tab, 70 = width of tabs
        $('nav.tabs').scrollTo((currentTab - 3) * 70, {axis: 'x', duration: 100});

        return false;
    });

    $('a[href="#year-2014"]').click();
});