Linking menu items and jQuery ui tabs together

Question

I am trying to link navigation menu items and jQuery tabs together. That means I have two submenu items just think those are category and item and also I have 2 tabs in my page, those are My category and My Items.

What I am trying to do using this is I want to open My category tab when I click on the link category from submenu and vice versa. And also I want to open My Item tab when I click on the link item from the submenu and vice versa.

I tried it doing with jQuery but can't get to work correctly.

My 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>

This is my 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; 
    });

This is JS Fiddle

You can see it is working in some manner but not perfectly. Reverse order also not working. Reverse order mean I need to select submenu item according to clicks on tabs.

UPDATE -

According to above JSFiddle

If I click on category link from submenu category tab is opening but its content display from item tab.
If I click on item link from submenu item tab is opening but its content from category tab.

Hope someone will help me.

Thank you.

Duplicate of http://stackoverflow.com/questions/578348/switch-to-selected-tab-by-name-in-jquery-ui-tabs ? — Skrivener, Jun 16 '13 at 02:59

PSL · Accepted Answer · 2013-06-16T04:53:38.650

You can make it simpler: Use right methods to do the job. You are not utilizing jquery ui tabs events /methods.

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

Minor addition to your markup adding a data-target on your menu link to point to the tab:

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

Demo

References:

Great! Its working perfectly. But your coding little difficult to understand. Anyway Thank you very much for like this perfect solution. — TNK, Jun 16 '13 at 04:04
@TNK Rather than just fixing i just went through your code refactoring.. Use right methods to do the job and things will become simpler :) — PSL, Jun 16 '13 at 04:04
@TNK I have added comments to each line in the answer. Let me know if you have questions. Happy to clarify it for you... — PSL, Jun 16 '13 at 04:06
Yes. I understand. can I have some explanation through your code? — TNK, Jun 16 '13 at 04:07
@TNK Updated the answer with more comments, and demo url with more comments and reference links. Hope this helps you... — PSL, Jun 16 '13 at 04:25

score 1 · Answer 2 · answered Jun 16 '13 at 03:37

This is all you need:

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

it's just tweaks based on the link I posted.

Fiddle: http://jsfiddle.net/925at/1/

Not the perfect as I expect, but it is closed. Anyway upvote for your help — TNK, Jun 16 '13 at 04:11

score 0 · Answer 3 · answered Jun 16 '13 at 03:32

0

You should include at least a snippet of the HTML that would put your jquery code in context so future visitors don't have to rely on jsfiddle.

It looks like you are calling hide/show on the wrong divs. If #tabs-1 holds your category content, and #tabs-2 holds your item content, shouldn't clicking on #cat-link show #tabs-1 and not hide it?

answered Jun 16 '13 at 03:32

Joe

25,000
3
22
44

then in the first 2 lines of both click functions, swap the hide and show – Joe Jun 16 '13 at 03:38

Linking menu items and jQuery ui tabs together

3 Answers3

Demo