单击子菜单时，导航链接不突出显示当前菜单

Question

我编写了jquery代码，用于突出显示每个respective submenu的菜单onclick。现在发生的事情是

我在三个sub-menu's中有一个相同的链接，所以当我点击其中一个时，它会突出显示最后一个菜单。

这是我的代码： -

var str = location.href.toLowerCase();
        $("#menu li a").each(function () {
            if (str.indexOf($(this).attr("href").toLowerCase()) > -1) {
                 $("li.activelink").removeClass("activelink");
                 $(this).parent().addClass("activelink");
                 $(this).parents("#menu ul").parent().addClass("activelink");
             }
         });
         $("li.activelink").parents().each(function () {
             if ($(this).is("li")) {
                 $(this).addClass("activelink");
             }
         });
         $("li.activelink").parents("#menu ul").parent().each(function () {
             if ($(this).is("li")) {
                 $(this).addClass("activelink");
             }
         });
         $("#menu li .para1 a").each(function () {
             if (str.indexOf($(this).attr("href").toLowerCase()) > -1) {
                 $("li.activelink").removeClass("activelink");
                 $(this).parent().addClass("activelink");
                 $(this).parents().parent().addClass("activelink");
             }
         });
         $("li.activelink").parents().each(function () {
             if ($(this).is("li")) {
                 $(this).addClass("activelink");
             }
         }); 

看看这里

另请参阅Js fiddle中相同的HTML 请提出相同的建议

Answer 1

更新：这不是OP预期的问题。下面的代码不能解决问题。

我曾多次遇到这个问题。试试这个CSS代码：

#menu > li:hover { background-color: red; }

用您自己的高光替换背景颜色声明。