2012-10-11 24 views
0

我使用的jQuery選項卡如下所示: http://jqueryui.com/tabs/ 我可以沿頂部顯示一行製表符,並將HTML分成這些部分,並通過激活這些選項卡來查看。jQuery HTML href選項卡

但是我對這種感覺並不完全滿意。

因爲我有各種各樣的Href圍繞重定向到各個地方的系統,我想知道是否有人知道是否有方法能夠指向顯示這些選項卡的頁面的鏈接,同時打開來自URL的相關標籤還是不同的方法?

例如當您給div一個ID並且可以href到該ID並且頁面向下滾動到該點時,這種簡單的方法。有了這個,你可以在URL中指定你想要去的頁面上的哪個標籤。雖然一旦與jQuery結合使用,這是不可能的。

+0

來到你的意思是直接鏈接到一個標籤或鏈接到內容的標籤? – strmstn

+0

那就是爲什麼我寫我自己的標籤,而不是使用jQuery –

+0

內置鏈接到標籤的內容? @strmstn –

回答

1

創建選項卡 我們所有的調用發生在document.ready()函數中。 首先,我們將使用普通的jQuery UI技術創建選項卡。在這種情況下,我們已經將標籤ul和相關的div封裝在一個帶有「tab-set」類的div中。

$(".tab-set").tabs(); 

獲取新的遊客到正確的選項卡 接下來,我們要看到,如果我們需要加載一個特定的標籤。我們將檢查我們所在的頁面是否有「標籤集」div,並檢查URL以查看是否存在散列。如果對兩者都是這樣,那麼我們使用scrollTo插件將我們跳轉到「製表符集」div(這會保持製表符可見),同時依靠jQuery UI的默認行爲來顯示正確的製表符內容。

if($(".tab-set") && document.location.hash){ 
    $.scrollTo(".tab-set"); 
} 

創建的標籤 收藏的網址,一旦用戶在頁面上,我們使用localScroll插件在地址欄中更新URL,同時保持頁面的重裝。

$(".tab-set ul").localScroll({ 
    target:".tab-set", 
    duration:0, 
    hash:true 
}); 

什麼,說是「滾動到div‘標籤設定’,而不是鏈接本身的目標,沒有動畫做到這一點,和哈希添加到URL」。 就是這樣!滿足所有要求。

How to Open A specific Tab from Link in jQuery

+0

更改「$ .scrollTo(」.tab-set「);」 setTimeout(「$。scrollTo(」.tab-set「)」,100);在需要更多時間渲染的舊IE瀏覽器中工作,如果scrollTo未準備好,scrollTo將無法工作,但這會爲其他人使用舊IE瀏覽器增加額外的延遲,只是一個想法 –