javascript - 将悬停状态保持在最后单击的菜单项上

Question

我在我的网站上添加了一个不错的 ( jquery+ css) 导航菜单，但有一个小问题。当我单击一个菜单项时，浅蓝色框跳回第一个项目，我希望该框留在单击的项目上，但我不知道如何实现它。

这是一个例子：http: //jsfiddle.net/Stylock/ta8g4/

在该示例中，它实际上可以按我的意愿工作，但是在我的网站上由于某种原因它不起作用。任何帮助将非常感激。

Answer 1

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

在你的css中，你对 .selected 应用相同的样式而不是 :hover

http://api.jquery.com/addClass/

或者你的云也使用 jQuery 修改 css。但是第一个解决方案更灵活。

编辑：使用回调函数添加/删除类，你的效果

Answer 2

这可能是正确方向的解决方案： Onclick 检查菜单是否已经有一个类名以更改背景 从那里删除该类 添加您单击的类需要一些小的 css 更改，您将解决它

祝你有美好的一天

Answer 3

您可以在其他页面加载时添加一个类，例如在所有页面上添加这样的错误

<script type="text/javascript">

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

    });


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

</script>

我在http://www.hoteloperaindia.com/上使用了这个网站

或喜欢这个简短的将其添加到母版页

 <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>

我使用这个的网站http://rtshotel.in/

用你的代码改变它