0

ナビゲーション メニュー項目と jQuery タブをリンクしようとしています。つまり、 と であると思われる 2 つのサブメニュー項目がcategoryありitem、ページには と の 2 つのタブがMy categoryありMy Itemsます。

これを使用してやろうとしていることは、サブメニューからMy categoryリンクをクリックしたときにタブを開きたいcategory、またはその逆です。My Itemまた、サブメニューからリンクをクリックしたときにタブを開きたい、itemまたはその逆。

jQueryでやってみましたが、正しく動作しません。

私のHTML -

<ul id="new-menu">
  <li class="dropdown-holder" id="">
    <a>My Menu</a>
      <div class="dropdown">
        <div class="menu-container">
            <div class="menu-link">
                <a href="">my sub menu 1</a>
             </div>
             <div class="menu-link">
                <a href="">my sub menu 2</a>
             </div>
         </div>
      </div>
   </li>

  <li class="dropdown-holder" id="">
    <a>Category & Item</a>
      <div class="dropdown">
        <div class="menu-container">
            <div class="menu-link">
                <a href="" id="cat_link">Category</a>
             </div>
             <div class="menu-link">
                <a href="" id="item_link">Item</a>
             </div>
         </div>
      </div>
   </li>
</ul>

<div id="main">
  <ul>
    <li><a href="#tabs-1">Category</a></li>
    <li><a href="#tabs-2">Item</a></li>
  </ul>
  <div id="tabs-1">
    <p>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your.</p>
  </div>
  <div id="tabs-2">
    <p>On the Insert tab, the galleries include  other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your.</p>
  </div>
</div>

これは私のjQueryです：

    function setCurrent(element) { 
        $('div').removeClass('current'); 
        $(element).parent().addClass('current'); 
    } 

    $('#cat_link').click(function() { 
        $('#tabs-1').hide(); 
        $('#tabs-2').show(); 
        setCurrent(this); 
        $('#ui-id-2').parent().removeClass('ui-tabs-active ui-state-active');
        $('#ui-id-2').parent().addClass('ui-state-default ui-corner-top');
        $('#ui-id-1').parent().removeClass('ui-state-default ui-corner-top');
        $('#ui-id-1').parent().addClass('ui-tabs-active ui-state-active');
        return false; 
    }); 

    $('#item_link').click(function() { 
        $('#tabs-2').hide(); 
        $('#tabs-1').show(); 
        setCurrent(this); 
        $('#ui-id-1').parent().removeClass('ui-tabs-active ui-state-active');
        $('#ui-id-1').parent().addClass('ui-state-default ui-corner-top');
        $('#ui-id-2').parent().removeClass('ui-state-default ui-corner-top');
        $('#ui-id-2').parent().addClass('ui-tabs-active ui-state-active');
        return false; 
    });

これはJSフィドルです

何らかの方法で機能していることがわかりますが、完全ではありません。逆順も機能しません。逆順とは、タブのクリックに応じてサブメニュー項目を選択する必要があることを意味します。

アップデート -

上記のJSFiddleによると

  1. サブメニューのカテゴリ タブからカテゴリ リンクをクリックすると、そのコンテンツがアイテム タブから表示されます。

  2. サブメニュー アイテム タブからアイテム リンクをクリックすると、そのコンテンツがカテゴリ タブから開きます。

誰かが私を助けてくれることを願っています。

ありがとうございました。

4

3 に答える 3

2

あなたはそれをもっと簡単にすることができます：仕事をするために正しい方法を使ってください。jquery ui タブのイベント / メソッドを利用していません。

$("#main").tabs({
    activate: function (event, ui) { // subscribe to tab activate
        var target = '.menu-link [data-target=#' + ui.newTab.attr('aria-controls') + ']'; // Get the ID of the tab activated. aria-controls on the rendered tab div will give the id of the tab anchor. so get the target as the menu link which has the data-target as that of the id of the current tab.
        addCurrent(target); // set up corresponding menu link
    }
});

$('.menu-link a').click(function (e) {
    e.preventDefault();  // This is required to prevent the default action on click of an  anchor tab.

    var target = $(this).data('target'); // Get the target repsective to the clicked menu. This is  jquery data() to retreive data attribute value.

    $("#main").tabs("option", { //Use right method to do the job. set which tab to be opened by using the jquery ui tabs option overload.
        'active': $(target).index() - 1 // set the index of the tab to be opened. Get the index using .index() on the target which is the tab anchor and set that as active.
    });

    addCurrent(this); // set up style for the current menu link

});

function addCurrent(elem) {
    $('.current').   // select the currently activated elements
               not($(elem)  // but not this one if clicked on itself
               .closest('.menu-link') // get the closest(Use this instead of parent(), closest is recommended to parent)
               .addClass('current') // add the class to the new menu
     ).removeClass('current'); // remove from existing ones.
}

メニューリンクにデータターゲットを追加して、タブを指すマークアップへのマイナーな追加:

  <a href="" id="cat_link" data-target="#tabs-1">Category</a>

デモ

参考文献:

于 2013-06-16T03:38:58.470 に答える
1

必要なのはこれだけです:

$("#main").tabs();

$('.menu-container .menu-link a').on("click", function() {

    // get the position of the menu we clicked inside
    var menu_ind = $(this).parents('.dropdown-holder').index();

    // if not in the submenu we care about, go about default behavior
    if( menu_ind != 1 ) return;

    // get the position of the link
    var ind = $(this).parents('.menu-link').index();

    // activate the corresponding tab
    $("#main").tabs('select', ind);

    return false;
});

投稿したリンクに基づいて微調整しただけです。

フィドル: http://jsfiddle.net/925at/1/

于 2013-06-16T03:37:08.810 に答える