用按鈕更改Javascript選項卡？

我正在通過JavaScript實現標籤的網站上工作，我想創建一個按鈕，進入'下一個'選項卡。我不在乎是否必須在標籤ID中將代碼硬編碼到JavaScript或什麼內容，但不管我希望能夠推進標籤。用按鈕更改Javascript選項卡？

編輯3：這是我有的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; 
});

這實際上會顯示正確的選項卡的信息，但它不會更改哪個選項卡頭呃突出顯示。

任何人有任何想法？先謝謝您的幫助！

來源

2013-02-01 SuperXero

我們可以看到你的HTML嗎？或者也許在jsfiddle.net上的一個例子？ –

對不起！我已經添加了一些示例HTML，我希望有幫助！ – SuperXero

你使用'jQuery UI'選項卡嗎？你什麼時候叫'.tabs'？ –

如何：

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

並添加數值相當於ID給李的項目？

工作小提琴是在這裏：http://jsfiddle.net/gugahoi/Cd5qb/1/

UPDATE：

好吧，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>

來源

2013-02-01 07:43:18

有趣 - 它在小提琴中完美工作，在我的實際網站上。儘管我一字一句地嘗試了你的代碼 - 也許這可能是爲什麼。雖然...我想刪除用戶點擊選項卡標題的功能。所以理想情況下，按鈕是瀏覽標籤的唯一的東西。它看起來像你在調用標籤的點擊功能？如果你有任何想法，那會很棒！謝謝你的幫助！ – SuperXero

更新了您的新請求。 –

@古斯塔沃Hoirisch：你和以前的代碼我也沒刪除 '主動'從'tabContents'並即將發佈。無論如何grt工作。

來源

2013-02-02 07:39:21 Raunak

用按鈕更改Javascript選項卡？

回答

相關問題