Question

我正在处理水平导航菜单。这个菜单还有一个问题。当用户导航到页面时，我希望主要的li保持悬停状态。现在，李并没有处于悬停状态，只是简单地恢复到默认状态。我是否需要给身体一个班级来完成这项工作还是有另一种方式？可以在此处找到代码段：http://jsfiddle.net/SeasonEnds/LSmfN/

理想情况下，“读取”选项卡应在加载页面时采用悬停样式，但在用户将鼠标悬停在其他主要导航链接上时会消失。

Answer 1

当用户在另一个顶级链接上徘徊时，活动元素上的突出显示不应该消失，因为这对可用性不利 - 如果用户没有点击链接，那么他们就失去了视觉线索它们在您网站上的位置。

我稍微修改了css：

ul#topnav li.on a    {color:#828282; background: #f3f3f3; }
ul#topnav li a:hover {background: #f3f3f3; color:#828282;}
ul#topnav li a:visited {color:#828282; }

当你将鼠标悬停在孩子们身上时，我还添加了一些jQuery来保持活动顶级链接的颜色：

$("li a").hover(function(){
    $(this).parent().prev().toggleClass("top-level-highlight");
});

更新小提琴： http://jsfiddle.net/LSmfN/14/

Answer 2

如果没有服务器设置活动菜单元素，或者JS指示活动元素，菜单就无法知道它所在的页面。

这是你可以做的 - 在这里添加一个类来表示当前的位置：

ul#topnav li:hover, ul#topnav li.here {background: #f3f3f3;

使用js检测当前页面：

//var here = document.location+"" //for production
var here = "/home.html" //for testing  
 if(here.indexOf("home.html")>-1) {

     $('ul#topnav li').eq(0).addClass('here')
     $('ul#topnav li').mouseout(function() {
          $('ul#topnav li').removeClass('here')
     })
 } //repeat for all pages

主导航在页面加载时采用悬停样式

2 个答案: