Question

我正在开发一个通过javascript实现标签的网站，我想创建一个转到“下一个”标签的按钮。我不在乎我是否必须将标签ID硬编码到javascript中或者是什么，但不管我是否希望能够推进标签。

EDIT3：这是我所拥有的jfiddle实现。我只想让下一个按钮能够推进标签，类似于点击它们。谢谢！

这是我当前工作标签的代码，没有按钮：

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

这实际上会显示正确的标签信息，但不会更改突出显示的标签页。

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

Answer 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/

<强>更新

好的，here is the new fiddle只有按钮更改标签。

这是所有的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>

Answer 2

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

用按钮更改Javascript选项卡？

2 个答案: