jQuery：選項卡/內容可以鏈接到

我已經實現了一個標籤制度，我可能會花更多的時間來實現一個又一個與解決方案，我需要的，不是在調整我的代碼是給人打預防針，並學到一些東西一邊問:)

我的問題是無法鏈接到標籤，我需要能夠鏈接到另一個網站或頁面的標籤，並且在加載頁面時選擇該標籤。

ie：我有三個顯示不同產品的選項卡，默認情況下，頁面加載時選項卡1處於活動狀態/選中狀態。從主頁我想鏈接到標籤2，但我無法鏈接到標籤2，因爲它沒有被選中。不知道這是否有道理。

標籤：

<ul> 
    <li><a href="#tab1">Product 1</a></li> 
    <li><a href="#tab2">Product 2</a></li> 
    <li><a href="#tab3">Product 3</a></li> 
</ul> 

<div class="tab_container"> 
    <div id="tab1" class="tab_content">Product 1 info...</div> 
    <div id="tab2" class="tab_content">Product 2 info...</div> 
    <div id="tab3" class="tab_content">Product 3 info...</div> 
</div>

我的jQuery：

$(document).ready(function() { 

//Default Action 
$(".tab_content").hide(); 
$("ul.tabs li:first").addClass("active").show(); 
$(".tab_content:first").show(); 

//On Click Event 
$("ul.tabs li").click(function() { 
    $("ul.tabs li").removeClass("active"); 
    $(this).addClass("active"); 
    $(".tab_content").hide(); 
    var activeTab = $(this).find("a").attr("href"); 
    $(activeTab).fadeIn(); 
    return false; 
    }); 

});

有沒有辦法這個代碼可以適合於能夠從任何地方連接到任何標籤，有標籤都被選擇時，頁面加載？

在此先感謝。

來源

2010-04-22 Ricardo Zea

你的標籤會更可用這樣的：

<ul> 
    <li><a href="#tab1">Product 1</a></li> 
    <li><a href="#tab2">Product 2</a></li> 
    <li><a href="#tab3">Product 3</a></li> 
</ul> 

<div class="tab_container"> 
    <div id="tab1" class="tab_content">Product 1 info...</div> 
    <div id="tab2" class="tab_content">Product 2 info...</div> 
    <div id="tab3" class="tab_content">Product 3 info...</div> 
</div>

所以，你現在可以尋找在瀏覽器的URL的哈希（如使用location.pathname提取URL哈希和使用$ .tabs（）。select（[id]或[index]）來設置選項卡）。

例如

$(function(){ 
    $('tabs').tabs(); 
    var hash = location.hash; 
    $('tabs').tabs("select" , hash); 
});

來源

2010-04-22 03:14:07

奇怪，你如何回答同樣的事情5分鐘後，我得到了所有選票：S – 2010-04-22 03:28:36

我知道你的感受，併爲此道歉。但是公平起見，當SO通知顯示有一個新答案時，我已經寫了第一稿。我沒有剽竊;我們都同意這是回答這個問題的正確方法。 – 2010-04-22 03:32:37

感謝您的信息...但是，我必須道歉，我在我的代碼中犯了一個錯誤：而不是使用「products.php」我有我的標籤爲「＃tab1」，「＃tab2」，「#tab3 「等，我糾正了我的第一篇文章。如何將您提到的示例代碼與我在第一篇文章中使用的代碼結合起來？非常感謝。 – 2010-04-22 13:32:00

遇到此問題的其他幾次談話的SEO專家後，我決定停止使用<一個>元素標籤從現在開始，而不是我用簡單的< SPAN>元素，像這樣：

<ul class="tabs"> 
    <li><span rel="tabs1" class="defaulttab">Tab 1</span></li> 
    <li><span rel="tabs2">Tab 2</span></li> 
    <li><span rel="tabs3">Tab 3</span></li> 
</ul>

在<使用「＃」一>元素（虛擬鏈路）是不是搜索引擎友好，使用< SPAN>元素，使內容的標題/標籤部分該頁面（SEO友好）和功能保持不變。

您需要做的就是修改您的腳本以引用's而不是< a''，並添加'cursor：pointer'。到您的CSS爲< span>。這適用於所有瀏覽器，包括IE6。

這個解決方案的另一個好處是，如果標籤在頁面下方，當單擊標籤時頁面不會跳回，這是一個很大的可用性改進。

來源

2010-06-08 22:06:16

jQuery：選項卡/內容可以鏈接到

回答

相關問題