1

私はメニュータブ構造を持っています:

<div id="tabs">
  <ul>
    <li><a href='#tabs-1'>TabGroup1</a></li>
    <li><a href='#tabs-2'>TabGroup2</a></li>            
  </ul>
  <div id='tabs-1'>
    <a href='tab1_link1.html'>TabGroup1-link1</a>
    <a href='tab1_link2.html'>TabGroup1-link2</a>
  </div>
  <div id='tabs-2'>
    <a href='tab2_link1.html'>TabGroup2-link1</a>
    <a href='tab2_link2.html'>TabGroup2-link2</a>
  </div>
</div>

TASK : 選択したタブの最初のリンクに場所を自動変更する必要があります。したがって、2 番目のタブをクリックすると、ページがリロードされ、最初のリンク (tab2_link1.html) が選択された 2 番目のタブが表示されます。

タブをアクティブなリンクにするソリューションを見つけましたが、これはタブが空のdivの場合に機能し、タブのコンテンツからリンクをアクティブにする必要があるため、これは私のタスクを解決していません。

4

3 に答える 3

2

タブが選択されると、「tabsselect」イベントがトリガーされます。それでは、それにバインドしましょう：

$( "#tabs" ).bind( "tabsselect", function(event, ui) {
    //Here we have:
    ui.options // options used to intialize this widget
    ui.tab // anchor element of the selected (clicked) tab
    ui.panel // element, that contains the contents of the selected (clicked) tab
    ui.index // zero-based index of the selected (clicked) tab

SO、あなたの場合、ウィンドウの場所を選択したタブの最初のアンカー要素 href url に設定する必要があります。

window.location.href = $(ui.panel).find('a:first').attr(href);});

したがって、上記とあなたのマークアップを考えると、これはそのタブで参照されている最初のリンクの場所に移動します。

$( "#tabs" ).bind( "tabsselect", function(event, ui) {
    var myhref = $(ui.panel).find('a:first').attr('href');
    alert("Here we go to:"+href);
    window.location.href = href;
});

最終的なスクリプト:

$( "#tabs" ).bind( "tabsselect", function(event, ui) {
     window.location.href = $(ui.panel).find('a:first').attr('href');
});

上記のサンプル作業例: http://jsfiddle.net/PyM7p/

自己メモ: 現在のページで最初のリンクのみが使用される場合に、タブに複数のリンクがあるのは奇妙に思えます。ただし、それは私のページのマークアップではありません。

于 2012-05-16T14:51:50.497 に答える
0

ここで説明されているように、JQuery 1.9+ ではタブ選択イベントが破棄されます。jquery 1.9+で作業するには、次のようなことをする必要があります

$( "#tabs" ).on( "tabsactivate", function( event, ui ) {

} );

UI には次の 4 つのオブジェクトがあります。それらはすべて Jquery オブジェクトです。したがって、再度ラップする必要はありません。

  • 新しいタブ

アクティブ化されたばかりのタブ。

  • 古いタブ

非アクティブ化されたばかりのタブ。

  • 新しいパネル

起動したばかりのパネル。

  • 古いパネル

無効化されたばかりのパネル。

したがって、最終的なコードは次のようになります

$( "#tabs" ).on( "tabsactivate", function( event, ui ) {
     window.location.href = ui.newTab.find('a.ui-tabs-anchor').attr('href');
} );
于 2013-07-30T09:42:39.150 に答える
0

リスナー do select イベントを追加し、この関数で location.href を設定してからブラウザをリロードします。

于 2012-05-16T09:20:14.223 に答える