0

我正在一个通过 javascript 实现选项卡的网站上工作，我想创建一个转到“下一个”选项卡的按钮。我不在乎是否必须将选项卡 ID 硬编码到 javascript 中或什么，但无论如何我都希望能够推进选项卡。

EDIT3：这是我所拥有的 jfiddle 实现。我只希望下一个按钮能够推进类似于单击它们的选项卡。谢谢！

http://jsfiddle.net/Cd5qb/

这是我当前工作选项卡的代码，没有按钮：

var tabContents = $(".tab_content").hide(), 
    tabs = $("ul.tabs li");

tabs.first().addClass("active").show();
tabContents.first().show();

tabs.click(function() {
    var $this = $(this), 
        activeTab = $this.find('a').attr('href');
    if(!$this.hasClass('active')){
        $this.addClass('active').siblings().removeClass('active');
        tabContents.hide().filter(activeTab).fadeIn();
    }
    return false;
});

所以我正在尝试实现类似于 tabs.click 的按钮，这就是我到目前为止所得到的：

var tabbtn = $(".tabbutton");
tabbtn.click(function() {
    var listItem = document.getElementById('tab2');
    var $this = $(this), 
        activeTab = $this.find('a').attr('href');
    tabContents.hide().filter("#tab2").fadeIn();

    return false;
});

这实际上将显示右侧选项卡的信息，但不会更改突出显示的选项卡标题。

有人有想法么？在此先感谢您的帮助！

4

2 回答 2

1

怎么样：

$(".tabbutton").click(function(){
    var nextTab = parseInt($("li.active").attr("id"), 10) + 1;
    if(nextTab === 4){ nextTab = 1; }
    $("#"+nextTab).click();
});

并为 li 项目添加一个数字等效 id？

工作小提琴在这里：http: //jsfiddle.net/gugahoi/Cd5qb/1/

更新：

好的，这是新的小提琴，只有按钮更改选项卡。

这是所有的js：

var tabContents = $(".tab_content").hide(), 
    tabs = $("ul.tabs li");

tabs.first().addClass("active").show();
tabContents.first().show();

$(".tabbutton").click(function(){
    var nextTab = parseInt($("li.active").attr("id"), 10) + 1;
    if(nextTab === 4){ nextTab = 1; }
    tabs.removeClass("active");
    $("#"+nextTab).addClass("active");
    tabContents.hide();
    $("#tab"+nextTab).fadeIn("slow");
});

这是 html 中唯一需要的更新：

<ul class="tabs clearfix">
    <li id="1"><a href="#">Tab1</a></li>
    <li id="2"><a href="#">Tab2</a></li>
    <li id="3"><a href="#">Tab3</a></li>
</ul>
于 2013-02-01T07:43:18.613 回答
0

@ Gustavo Hoirisch：使用您之前的代码，我也确实从“tabContents”中删除了“active”并即将发布。无论如何，grt 工作。

于 2013-02-02T07:39:21.923 回答