Javascript 在上次单击的菜单项上保持悬停状态

我已经在我的网站上添加了一个不错的（

jquery

+

css

）导航菜单，但是有一个小问题。当我单击菜单项时，浅蓝色框跳回第一个项，我希望框停留在单击的项上，但我不知道如何实现

下面是一个例子：

---

在那个例子中，它实际上按照我想要的方式工作，但在我的网站上，由于某种原因它不工作。任何帮助都将不胜感激。

您可以向项目添加一个类，如.selected

在css中，将相同的样式应用于.selected，而不是：hover

或者您也可以使用jQuery修改css。但第一种解决方案更加灵活

---

编辑：使用回调函数添加/删除类，在生效后这可能是正确方向的解决方案： Onclick检查菜单是否已经有类名来更改背景 从那里移除那个类 添加您单击的类 一些小的css变化是必要的，你会解决它

---

祝您度过愉快的一天

当其他页面加载喜欢添加到所有页面时，您可以添加一个类，如 这是坏的

<script type="text/javascript">

    $(window).load(function () {
        $("#index").toggleClass("highlight");

    });


    $(window).unload(function () {
        $("#index").toggleClass("highlight");
    });

</script>

$（窗口）。加载（函数（）{
$（“#索引”）。切换类别（“突出显示”）；
});
$（窗口）。卸载（函数（）{
$（“#索引”）。切换类别（“突出显示”）；
});

我用过这个网站

或者像这个简短的一个添加到母版页

 <script>
        $(function () {
            var loc = window.location.href; // returns the full URL
            if (location.pathname == "/")  {
                $('#home').addClass('active');
            }
            if (/index/.test(loc)) {
                $('#home').addClass('active');
            }
            if (/about/.test(loc)) {
                $('#about').addClass('active');
            }
            if (/accommodation/.test(loc)) {
                $('#accommodation').addClass('active');
            }
            if (/gallery/.test(loc)) {
                $('#gallery').addClass('active');
            }
            if (/tariff/.test(loc)) {
                $('#tariff').addClass('active');
            }
            if (/facilities/.test(loc)) {
                $('#facilities').addClass('active');
            }
            if (/contact/.test(loc)) {
                $('#contact').addClass('active');
            }
        });
</script>

$（函数（）{
var loc=window.location.href；//返回完整的URL
如果（location.pathname==“/”）{
$（'#home'）.addClass（'active'）；
}
如果（/index/.test（loc））{
$（'#home'）.addClass（'active'）；
}
如果（/about/.test（loc））{
$（'#about'）.addClass（'active'）；
}
如果（/住宿/测试（loc））{
$（'住宿'）.addClass（'活动'）；
}
如果（/gallery/.test（loc））{
$（'#gallery'）.addClass（'active'）；
}
如果（/tariff/.test（loc））{
$（'关税'）.addClass（'现行'）；
}
如果（/facilities/.test（loc））{
$（'设施'）.addClass（'活动'）；
}
如果（/contact/.test（loc））{
$（'#contact'）.addClass（'active'）；
}
});

我使用这个的网站

---

用你的代码更改它

对我来说，它工作得很好。我想这是因为你在真正的网站上切换页面，对吧？新页面将再次初始化菜单滑块…当它在小提琴中工作时，请从您的网站添加代码。如果它在您的网站上不工作，请提供一个链接，当您在网站中单击它时，它将导航到新页面？如果它重新加载页面，所有javascript都将从头开始重新运行，并且您将失去状态。在这里，它无法在小提琴上工作（linux下的Chrome（ubuntu）），我可能会尝试此解决方案。我很好奇为什么JSFIDLE不能在Linux上工作？我将尝试第一种解决方案。第二个不是真正的选项，因为我使用内容管理系统。每次有人创建新页面时，我都需要修改该脚本。@Sahil Popli有点离题，你知道我如何解决类似问题吗？谢谢，我完全是个新手。我想花点时间，这样你会更好地理解，我会帮助你只需遵循以下链接：$（'.ClassYouClicked'）。在（'click'，function（）{//删除以前添加的类//在你单击的当前项上添加类（提示$（this））}）祝你好运！