Javascript 循环jQuery选项卡

我正在使用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>

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

这是一个开始：但这需要对您的部分进行一些调整。希望它能让你开始

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

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>

JS

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;
    }

$(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();
});

---

你能把你到目前为止试过的代码贴出来吗？老实说，我还没有试过任何东西。我不知道怎么开始。我一直在尝试让autocomplete在eclipse中为jQuery工作。不过，我会发布我的标签是如何设置的。就我个人而言，我认为你最好自己实现这一点。据我所知，jQueryUI标签不容易满足这样的需求。你是说我自己从头开始写整件事？哇。伙计，你搞定了。速度也很快。我已经让它几乎可以工作了，但出于某种原因，所有的选项卡元素都同时显示出来。知道我做错了什么吗？嗯。听起来你可能对每个标签内容都使用了相同的ID？每个选项卡内容都应该有一个唯一的ID，每个链接都应该指向每个ID，这样代码才能正常工作。顺便说一句：除非你已经弄明白了，否则你可以使用

animate（'width'，'50px/90px'）

而不是

add/removeClass（'active'）

来获得一点幻灯片，你可以使用

scrollTo（）

-插件而不是

。scrollLeft

来制作滚动动画。你是指选项卡内容div中的每个div吗？我从你的代码中复制并粘贴了它们，它们在我看来都不一样。谢谢你指出动画的事情！我实际上是在计划这样的事情。这是一个有动画和一些不那么刺耳的颜色的版本：