在javascript中激活菜单？

Question

I have this code http://jsfiddle.net/9nd4j/1722/

$('ul.navi').each(function () {
// For each set of tabs, we want to keep track of
// which tab is active and it's associated content
var $active, $content, $links = $(this).find('a');

// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');

$content = $($active[0].hash);

// Hide the remaining content
$links.not($active).each(function () {
$(this.hash).hide();
});

// Bind the click event handler
$(this).on('click', 'a', function(e){
// Make the old tab inactive.
$active.removeClass('active');
$content.hide();

// Update the variables with the new link and content
$active = $(this);
$content = $(this.hash);

// Make the tab active.
$active.addClass('active');
$content.show();

// Prevent the anchor's default click action
e.preventDefault();
});
});

And I wanted to show text, one at a time, to the "Licenciatura" and the "MEstrado" and not the two simultaneously. Another problem is the active class, just intend that features an active item at a time and not one of "Licenciatura" and "Mestrado"

Answer 1

You can do something like this:

$('ul.navi').on('click', 'a', function (e) {
    //Change content displayed
    $($("ul.navi a.active")[0].hash).hide();      
    $(this.hash).show();

    //Change active item
    $("ul.navi a.active").removeClass("active");    
    $(this).addClass("active");  

    e.preventDefault();
});

//Hide all content divs except first one
$("ul.navi a").each(function(index){
    if(index != 0)
        $(this.hash).hide();
    else
        $(this).addClass("active");
});

Check it out here: JSFiddle