javascript - 我想让顶部选项卡在单击时保持打开状态

Question

您好，我正在使用此处找到的菜单: http://www.sohtanaka.com/web-design/examples/horizontal-subnav/

我遇到的问题是我希望在单击时保留顶部导航并同时显示子目录。我希望任何人都可以帮助我!

加载新页面时，顶部导航应该仍处于事件状态。我知道如何使用 JS/jQuery 在服务器端而不是客户端

Answer 1

通过快速查看页面源代码，我找到了这段处理悬停事件的 jQuery 代码:

$("ul#topnav li").hover(function() { //Hover over event on list item
    $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
    $(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
    $(this).css({ 'background' : 'none'}); //Ditch the background
    $(this).find("span").hide(); //Hide the subnav
});

如果您希望子导航栏在点击后保持可见或其他内容，只需在“悬停”函数中创建一个 if() 语句来检查是否已点击某些内容，即

} , function() { //on hover out...
    $(this).css({ 'background' : 'none'}); //Ditch the background
    if(subnavclick==0){
        $(this).find("span").hide(); //Hide the subnav
    }
});

然后在您的 subnav .click() 函数中添加 subnavclick 变量的设置，如下所示:

 $("span").click(function(){
   subnavclick==1;
   //do other stuff
 });

这应该适合你....