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

Question

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

我想用它做的是，当我从子菜单中单击链接 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()