javascript bootstrap JqueryUI 1.11選項卡直接鏈接到同一頁上的標籤



jquery ui download (1)

不幸的是,標籤小部件不會自動執行此操作。 您必須監聽hashchange事件,並手動設置活動選項卡。 以下是可能適用於您的一種方法:

$('#tabs').tabs({
    create: function() {
        var widget = $(this).data('ui-tabs');
        $(window).on('hashchange', function() {
            widget.option('active', widget._getIndex(location.hash));
        });
    }
});

上面的代碼將為create事件提供一個處理程序。 然後,我們使用data()獲取實際的小部件實例。 接下來,我們為hashchange事件設置一個處理程序。 當我們點擊一個外部鏈接時,就會觸發它。 該處理程序將根據當前的location.hash值設置活動選項卡。

我們使用_getIndex() ,一個內部的標籤方法根據哈希值計算活動標籤的索引。 儘管是一種內部的方法,但在這方面卻是一個很好的捷徑。

這是一個例子

Stack Overflow上的解決方案沒有一個適用於1.11,我已經測試了其中的每一個。

我需要能夠使用標籤ID而不是在頁面上的位置從菜單鏈接到同一頁上的選項卡。

我已經可以從外部頁面執行此操作,如下所示: http : //agileprojects.ro/tabs/links.html 。 我也有一個解決方案,用於在頁面內鏈接但僅限於選項卡的位置(第一,第二等)。 可悲的是,這不是一個有效的選擇:

鏈接是動態創建的網站菜單,它們應該具有相同的全能(又名:我不能添加一個點擊事件只是為了一些鏈接,取決於我在哪個網頁,或者說,我可以寫一些JavaScript來達到這個效果,但是一旦我把網站翻過來,就不可能添加新的鏈接和新的標籤)。

這將使得標籤無法被最終用戶切換並且鏈接正常工作。

代碼(儘管可以在鏈接的頁面中訪問)

    <script>
  $(function() {
    $('#tabs').tabs({
    select: function(event, ui) {
        window.location.hash = ui.tab.hash;
    }
});
  });
            jQuery(document).ready(function($){
    $('#link-1').click(function(){
        $('#tabs').tabs( 'option', 'active', 0 ); // Selects the first tab
    });$('#link-2').click(function(){
        $('#tabs').tabs( 'option', 'active', 1 ); // Selects the first tab
    });$('#link-3').click(function(){
        $('#tabs').tabs( 'option', 'active', 2 ); // Selects the first tab
    });
});
  </script>

html

<h2>These SHOULD link to tab ID </h2>
<p>They are the same as on the <a href="/tabs/links.html">links.html</a> page, same code, etc. THey don't work :(</p>
<a href="#tabs-1">Tab 1</a><br />
<a href="http://agileprojects.ro/tabs/tabs.html#tabs-2">Tab 2</a><br />
<a href="#tabs-3">Tab 3</a><br />
<br /><br /><br />

<h2>These link to tab position </h2>
<p>aka, they activate tab 1, tab 2, tab 3, etc. </p>
<a href="#tabs-1" id="link-1">Tab 1</a><br />
<a href="#tabs-2" id="link-2">Tab 2</a><br />
<a href="#tabs-3" id="link-3">Tab 3</a><br />

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>
<div id="tabs-1">dwedwedwedwedwed</div>
<div id="tabs-2">dwedwedwedwedwed</div>
<div id="tabs-3">dwedwedwedwedwed</div>
</div>




tabs