直接從另一頁面鏈接到jQuery選項卡？

我們先說我擅長HTML和CSS，但這個jQuery對我來說是新鮮事物。所以這可能很容易解決，我已經看過其他答案，但我無法得到它的竅門。直接從另一頁面鏈接到jQuery選項卡？

我有一個設置了四個選項卡jQuery的標籤表，就像這樣：

<ul class="tabs"> 
    <li> 
     <a rel="tab_1">Education Insurance</a> 
    </li> 
    <li> 
     <a rel="tab_2">Home Insurance</a> 
    </li> 
    <li> 
     <a rel="tab_3">Car Insurance</a> 
    </li> 
    <li> 
     <a rel="tab_4">Business Insurance</a> 
    </li> 
</ul>

每個選項卡的內容是在它下面一個單獨的div標籤，就像這樣：

<div class="panes"> 
    <div id="tab_1" class="tab-content"> 
     <p>Tab content goes here.</p> 
    </div>

我想要做的是在主頁上創建一個鏈接，該鏈接可以直接鏈接到單獨頁面上的選項卡2或選項卡3。有人能幫忙嗎？

來源

2012-05-30 Meagan Wiebler

我不知道你可能需要創建的鏈接，以便他們使用一些JavaScript來激活任何標籤？不確定是否可以簡單地鏈接到它們，因爲選項卡控件是JQuery對象而不是單獨的頁面。 –

主頁上的標籤或與鏈接不同的頁面？ – StuperUser

這些標籤位於單獨的頁面上。 –

這是在documentation :)一個簡單的片段，我自己用它。

var $tabs = $('#example').tabs(); // first tab selected 

$('#my-text-link').click(function() { // bind click event to link 
    $tabs.tabs('select', 2); // switch to third tab 
    return false; 
});

如果你想這樣做「上載」頁面（即主頁上的鏈接帶你到一個不同的選項卡式屏幕）你只是想在請求傳遞橫跨東西，該文件加載可以加密並使用.tabs（「select」，tabNo），如上所示。再次，我已經在生產代碼中做到了這一點，它是可靠的。

來源

2012-05-30 14:57:12

好的，我以前見過這個，但是因爲我對jQuery如此陌生，所以我不確定該怎麼處理這些代碼。它是在網頁上還是在JavaScript文件中？我是否需要爲每個需要它的選項卡創建一行？不要困難，我只需要知道如何處理它。 –

上面的代碼片段選擇了同一頁面中的一個標籤，但是，剝離了事件處理（.click行），其餘部分向您顯示瞭如何訪問標籤並操作它們。您只需要一個通過參數傳遞給另一個頁面的錨點，文檔就緒函數可以採取這些錨點來選擇正確的選項卡。 –

我假設所有內容div都可見，並且您需要在用戶單擊它時滾動到該特定div。你只需要將按鈕綁定到滾動事件。

$(document).ready(function() { 
$('button2').click = function(){ 
$(document).scrollTo('#tab2'); 
} 
}); 

$(document).ready(function() { 
$('button3').click = function(){ 
$(document).scrollTo('#tab3'); 
} 
});

現在創建兩個ID爲'button1'和'button2'的按鈕。例如。

<div id='button2'>Tab2</div> 
or 
<a href='#' id='button2'>Tab2</a>

當用戶點擊它們時，他被帶到內容div。

來源

2012-05-30 14:58:15

你可以使用jQuery UI標籤，多數民衆贊成這樣做自動。

這裏是一個Working Fiddle

選項卡鏈接

First tab

Second tab

Third Tab

參考：JQuery UI tabs

更妙的是，你可以改變選擇的哈希，使用戶可以複製網址自己這樣

$('#tabs').tabs({ 
    select: function(event, ui) { 
     window.location.hash = ui.tab.hash; 
    } 
});

來源

2012-05-30 14:59:10

直接從另一頁面鏈接到jQuery選項卡？

回答

相關問題