打開帶有URL的JQuery選項卡，並在選項卡上添加哈希到URL單擊

我正在研究一個Web應用程序，並且使用JQuery UI選項卡插件來分隔數據。
如果我將鼠標懸停在每個選項卡上，在屏幕左下角，我可以看到該選項卡的URL（例如：testPage.com/#tab1或testPage.com/#tab2）打開帶有URL的JQuery選項卡，並在選項卡上添加哈希到URL單擊

現在，如果我在URL欄中輸入其中一個地址，我就不會去與URL中的哈希相關的選項卡，而是轉到應用程序中的第一個選項卡。

我的問題是：我將如何去錨定一個特定的標籤到URL？
所以如果有人去testPage.com/#tab3，他們將最終在應用程序的標籤3。

我這樣做也是因爲我想使用JQuery BBQ插件修改瀏覽器歷史記錄，所以我可以讓用戶在點擊後退按鈕時轉到最後一個選項卡。

例子：
http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/

來源

2012-06-13 npiani

'document.location.hash = VAR;'如果你只是在尋找的東西添加到URL ... –

要向我能夠通過地址訪問該選項卡？當我在鏈接中給出的示例中選中某個選項卡時，我基本上都會執行正在執行的操作。 – npiani

那麼爲什麼不直接複製那個例子呢？ –

我最終使用從Asual JQuery的地址插件。我做了以下：

// For forward and back 
    $.address.change(function(event){ 
     $("#main_tabs").tabs("select" , window.location.hash); 
    }); 

    // when the tab is selected update the url with the hash 
    $("#main_tabs").bind("tabsselect", function(event, ui) { 
     window.location.hash = ui.tab.hash; 
    });

希望這可以幫助別人！謝謝。

來源

2012-06-21 20:49:00 npiani

您也可以嘗試以下方法。我在錨元素中有name屬性。該名稱將被添加爲散列URL。

的Javascript：

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

HTML：

<div id="tabs" > 
    <ul> 
     <li><a name="Test1" href="Home/Test1"> Tab 1 </a></li> 
     <li><a name="Test2" href="Home/Test2"> Tab 2 </a></li> 
     <li><a name="Test3" href="Home/Test3"> Tab 3 </a></li>    
    </ul>   
</div>

來源

2013-10-09 15:00:32

打開帶有URL的JQuery選項卡，並在選項卡上添加哈希到URL單擊

回答

相關問題