在javascript中创建一个有效的菜单?

时间:2014-10-24 11:37:03

标签: javascript html

我有这个代码 的 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();
});
});

我希望一次一个地向#34; Licenciatura"和#34; MEstrado"而不是两个同时。 另一个问题是活动类,只是打算一次提供一个活动项,而不是" Licenciatura"和" Mestrado"

1 个答案:

答案 0 :(得分:1)

您可以这样做:

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

请在此处查看:JSFiddle