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之类的其他文件夹中，您可以将路径名保存在网址中，如下所示：

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
}

如何保持菜单突出显示？

3 个答案: