Question

我在应用程序的每个页面上都加载了以下脚本：

           $(document).ready(function() { 
          $('ul li').click(function(){
            $("li").removeClass("current_page_item");
            $(this).addClass("current_page_item");
          });
        });

我的导航html看起来像：

                <ul id="dropmenu">
                    <li class="active">
                        <%=  link_to 'Home Page',  welcome_index_path %>                    
                    </li>
                    <li>
                        <%=  link_to 'Business Owners',  business_owners_path %>

                    </li>
                </ul>

每次单击“业主”链接时，标识活动页面的图像首先从主页链接移动到业务所有者链接，然后在页面重新加载时再次快速恢复到主页链接。在页面加载后，jQuery中是否有一种方法可以保持“活动”链接的状态？

Answer 1

如果没有更多信息，我相信你可能会以错误的方式解决这个问题。您是否尝试使用深层链接来显示/加载额外内容？如果是这样，您的页面不应该重新加载。您可以使用jquery地址来完成此任务。 http://www.asual.com/jquery/address/

如果您的页面实际链接到单独的页面，那么这可以通过CSS完成。一种解决方案是将一个类设置为正确设置活动导航样式的主体。

的 HTML

<body class="business"> <ul id="dropmenu"> <li class="nav-home"><a href="#">Home</a></li> <li class="nav-business"><a href="#">Business</a></li> </ul> </body>

的 CSS

#dropmenu a { display:block; } #dropmenu a:hover { border:1px solid #ccc; } * active */ .business .nav-business { border:1px solid #000; }

相关小提琴：http://jsfiddle.net/tNpVr/

jQuery Navigation Active类在页面重新加载时恢复

1 个答案: