将鼠标悬停状态保留在最后单击的菜单项上

Question

我已经在我的网站上添加了一个不错的（ jquery + css ）导航菜单，但是存在一个小问题。 当我单击菜单项时，淡蓝色的框跳回到第一项，我希望该框保持在单击的项上，但是我不知道如何实现它。

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

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

Answer 1

您可以向.selected之类的项目添加一个类

并且在您的CSS中，将与.hover相同的样式应用于.selected

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/

用你的代码改变它