從頁面內容鏈接到JQuery標籤

我正在構建一個使用JQuery在主頁上創建標籤內容的應用程序。從頁面內容鏈接到JQuery標籤

我正在使用此示例代碼進行構建。 http://jqueryfordesigners.com/jquery-tabs/

這一切都很好，但我怎樣才能鏈接到一個標籤，使其行爲與從主頁或網站上的任何內容中點擊標籤鏈接相同？

我的Javascript代碼。

$(document).ready(function(){ 
var tabContainers = $('div.tabs > div'); 

$('div.tabs ul.tabNavigation a').click(function() { 
    tabContainers.hide().filter(this.hash).show(); 

    $('div.tabs ul.tabNavigation a').removeClass('selected'); 
    $(this).addClass('selected'); 

    return false; 
}).filter(':first').click();

}）;

我的HTML。

<div class="tabs"> 
    <!-- tabs --> 
    <ul class="tabNavigation"> 
    <li><a href="#tab1">Tab 1</a></li> 
    <li><a href="#tab2">Tab 2</a></li> 
    <li><a href="#tab3">Tab 3</a></li> 
    <li><a href="#tab4">Tab 4</a></li> 
    </ul> 

    <!-- tab containers --> 
    <div id="tab1"> 
    ... 
    </div> 
    <div id="tab2"> 
    ... 
    </div> 
    <div id="tab3"> 
    ... 
    </div> 
    <div id="tab4"> 
    ... 
    </div> 
</div>

我想我可以做一些鏈接

<a href="#tab3">My link text</a>

在我的內容，但我假設我需要做同樣的除了JavaScript代碼來完成這項工作。

編輯我已將以下代碼添加到我的JavaScript，但我單擊的選項卡沒有得到選定的CSS規則。

// add code for links to tabs 
$('a.tablink').click(function(){ 

    tabContainers.hide().filter(this.hash).show(); 

    $('div.tabs ul.tabNavigation a').removeClass('selected'); 
    $(this.hash).addClass('selected'); 

    return false; 
})

什麼我需要改變這裏 $（this.hash）.addClass（ '選擇'）; 添加.selected

來源

2011-06-20 Robert B

嘗試使用CSS3'：在你的jQuery target'選擇，以確定被點擊的標籤。 – kojiro

我不知道這個CSS3選擇器，當它工作時，它選擇信息div而不是li元素菜單項，因爲它具有#id。 –

喜歡的東西

tabContainers.filter(window.location.hash).show();

的CSS類你準備函數中，也許？然後，鏈接example.org/path#tab2將在頁面加載中打開正確的選項卡。編輯：哦，我想我有點誤解了這個問題。你是否也想在同一頁面上打開標籤？然後，你可以使用trigger：

<a href="#tab3" onclick="$('#tab3').trigger('click');">My link text</a>

（其實這是非常難看寫內嵌的JavaScript，但如果你正在處理一個CMS例如，它可能是最簡單的方法）

來源

2011-06-20 00:36:46 Betamos

或許這將在同一頁面內進行鏈接。

var currentHash = document.location.hash; 
$(window).bind('hashchange', function() { 
    if(currentHash != document.location.hash){ 
     $("a[href*="+document.location.hash+"]").click(); 
     currentHash = document.location.hash; 
    } 
});

然後你就可以通過散列鏈接到的標籤是這樣的：

<a href="#tab-hash-here">Link Title</a>

來源

2014-02-06 15:57:07 jivinivan

從頁面內容鏈接到JQuery標籤

回答

相關問題