Question

我正在尝试将导航菜单项和jQuery标签链接在一起。这意味着我有两个子菜单项只是认为它们是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 Fiddle

你可以看到它以某种方式工作但不完美。逆序也行不通。反向顺序意味着我需要根据选项卡上的点击选择子菜单项。

更新 -

根据以上JSFiddle

如果单击子菜单类别选项卡中的类别链接正在打开，但其内容将显示在项目选项卡中。
如果我点击子菜单项目标签中的项目链接正在打开，但其内容来自类别标签。

希望有人能帮助我。

谢谢。

Answer 1

您可以更简单：使用正确的方法来完成工作。您没有使用jquery ui tabs事件/方法。

$("#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>

Demo

参考文献：

Answer 2

这就是你所需要的：

$("#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/

Answer 3

您应该至少包含一段HTML，它会将您的jquery代码放在上下文中，以便将来的访问者不必依赖于jsfiddle。

看起来你在错误的div上调用hide / show。如果＃tabs-1包含您的类别内容，并且＃tabs-2包含您的项目内容，则不应该单击#cat-link show＃tabs-1而不隐藏它？

将菜单项和jQuery ui标签链接在一起

3 个答案:

Demo