jQuery - 選項卡式內容 - 在選定的選項卡上打開？

我創建了一些標籤式內容。有什麼方法可以讓我通過更改URL來決定要打開哪個選項卡？我相信我以前見過類似的東西，但找不到它！jQuery - 選項卡式內容 - 在選定的選項卡上打開？

我已經在這裏創造一個小提琴：http://jsfiddle.net/sW966/

默認標籤是標籤1，但是例如，如果URL爲http://jsfiddle.net/sW966/#tab-2的頁面將與標籤2開路負載？

感謝您的幫助，奮力一點點:)

$(document).ready(function() { 
    $(".tab").click(function() { 
     $(".tab").removeClass("active"); 
     $(this).addClass("active"); 
     $("#tabbed-content .tab-content").hide(); 
     $($(this).attr("href")).show(); 
    }); 
});

來源

2014-04-04 Nick

爲什麼不改變你的JS到：在此的jsfiddle不會工作

注：由於它的工作方式。

$(document).ready(function() { 


    if(window.location.hash){ 
     tabChange($('.tab[href=#'+window.location.hash+']')); 
    } 

    function tabChange(tab){ 
     $(".tab").removeClass("active"); 
     tab.addClass("active"); 
     $("#tabbed-content .tab-content").hide(); 
     $(tab.attr("href")).show();   
    }  
    $(".tab").click(function() { 
     tabChange($(this)); 
    }); 
});

來源

2014-04-04 09:36:19 SW4

jsfiddle代碼是 ht tp：//jsfiddle.net/manedeepak08/sW966/1/ 你可以測試 [here]（http://fiddle.jshell.net/manedeepak08/sW966/1/show/#tab-3） –

@DeepakMane - 上述將無法在jsfiddle工作盡我所知，你不能訪問'location.hash' – SW4

感謝您的幫助！這有效 - 但是，當我使用url.com/#tab-2時，頁面會下降到選項卡。我使用了$（「.tab」）。click（function（e）{e.preventDefault（）;單擊選項卡時解決這個問題，當您使用新的URL更改選項卡時似乎不起作用。任何想法？ – Nick

你可以試試這個：

Working fiddle here

替換屬性的「href」到「名」 ..

$(document).ready(function() { 
    $(".tab").click(function() { 
    $(".tab").removeClass("active"); 
    $(this).addClass("active"); 
    $("#tabbed-content .tab-content").hide(); 
    $($(this).attr("name")).show(); 
    }); 
});

好運....

來源

2014-04-04 10:07:16

嗨，名字工作正常，但它只是給了我以前的結果。如果我更改URL，默認選項卡仍然打開？謝謝 – Nick

在這裏檢查：http：// fiddle.jshell.net/sW966/3/show/ –

嗨Pradeep，它仍然不適合我？使用Chrome – Nick

jQuery - 選項卡式內容 - 在選定的選項卡上打開？

回答

相關問題