0

JavaScript を介してタブを実装している Web サイトに取り組んでおり、「次の」タブに移動するボタンを作成したいと考えています。タブ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/

アップデート：

OK、これはタブを変更するボタンだけの新しいフィドルです。

これはすべての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」を削除し、投稿しようとしていました。とにかく大変な仕事。

于 2013-02-02T07:39:21.923 に答える