如何保持菜单突出显示？

Question

我有一个小问题。 主要是因为我还在学习JQuery。

当用户单击菜单中的项目时，该项目将突出显示。 到现在为止还挺好。 但是，如果用户在他从菜单中选择的页面内输入另一个链接，则突出显示将丢失。

在用户从菜单中选择另一个选项之前，如何使菜单项保持突出显示？

jQuery代码是这样的：

<script type="text/javascript">
$(document).ready(function(){
    $('#sidemenu a').each(function(index) {
        if(this.href.trim() == window.location)
            $(this).addClass("selected");
    });
});
</script>

如果需要菜单代码和示例的css，这里是JFiddle演示（尽管在那里不起作用）： http : //jsfiddle.net/dptv0os6/3/

Answer 1

您可以尝试以下简单代码：

$('.sidemenu li').on('click', function () {
                $('li.active').removeClass('active');
                $(this).addClass('active');
            });

基本上，每次您单击li时，都会向其中添加一个类，并从预览中删除该类：

您的fddle更新了http://jsfiddle.net/dptv0os6/12/

Answer 2

如果您的页面位于另一个文件夹（如/ parent-page / sub-page）中，则可以将路径名保存在url中，如下所示：

var pathname = document.location.pathname;

然后，您只需进行一场比赛。

if(pathname.match(/parent-page/i){
   $('yourmenulink').addClass("selected");
}

为了进一步理解：将给定父页面的html文件放在您喜欢的文件夹中。 如果这样做，则可以通过带有location.pathname的URL访问文件夹名称。

Answer 3

你可以通过css做到。

.active{
background-color:red; // example
}