0

我正在尝试将导航菜单项和 jQuery 选项卡链接在一起。这意味着我有两个子菜单项，只是认为它们是categoryanditem并且我的页面中有 2 个选项卡，它们是My categoryand 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 回答
0

您应该至少包含一个 HTML 片段，它将您的 jquery 代码置于上下文中，这样未来的访问者就不必依赖 jsfiddle。

看起来您在错误的 div 上调用隐藏/显示。如果#tabs-1 保存您的类别内容，而#tabs-2 保存您的项目内容，不应该单击#cat-link 显示#tabs-1 并且不隐藏它吗？

于 2013-06-16T03:32:55.310 回答