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

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做一些小改动，你就可以解决这个问题了

have a great day

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/

用你的代码修改