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/

的网站

使用您的代码更改

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

3 个答案: