将菜单项和 jQuery ui 选项卡链接在一起

Question

我正在尝试将导航菜单项和 jQuery 选项卡链接在一起。这意味着我有两个子菜单项，只是认为它们是category 和item，而且我的页面中有两个标签，它们是My category 和My Items。

我想用它做的是，当我从子菜单中单击链接category 时，我想打开My category 选项卡，反之亦然。当我从子菜单中单击链接item 时，我还想打开My 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

1. 如果我单击子菜单类别选项卡中的类别链接正在打开，但其内容从项目选项卡中显示。

2. 如果我单击子菜单项选项卡中的项链接正在打开，但其内容来自类别选项卡。

希望有人能帮助我。

谢谢。

Answer 1

您可以让它变得更简单：使用正确的方法来完成工作。您没有使用 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>

Demo

参考资料：

• tabs.activate
• closest()
• index()
• tab options
• .not()

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 的 sn-p，它将您的 jquery 代码置于上下文中，这样未来的访问者就不必依赖 jsfiddle。

您似乎在错误的 div 上调用了 hide/show。 如果#tabs-1 保存你的分类内容，#tabs-2 保存你的item 内容，不应该点击#cat-link 显示#tabs-1 而不隐藏它吗？