Question

所以我有一个简单的菜单，我正在尝试删除/添加active类到单击的菜单项。

$(function(){
  $('ul.navbar-nav li').click(function(){
    $('ul.navbar-nav li').removeClass('active');
    $(this).addClass('active');
  });
});

<ul class="nav navbar-nav">
    <li class="active"><a href="/">Home</a></li>
    <li><a href="/work/">work</a></li>
    <li><a href="/methods/">methods</a></li>
    <li><a href="/blog/">blog</a></li>
    <li><a href="/team/">team</a></li>
    <li><a href="/contact/">contact</a></li>
</ul>

我遇到的问题是这样的，但是当我进入新页面refreshes网站时，我进入新页面时，活动类总是返回到我的HTML中的初始活动类。我觉得我已经多次这样做了，从来没有遇到过这个问题。也许我错过了什么。

Answer 1

当您在每个链接上重定向新页面时单击，因此在页面加载时删除了动态添加的active类。你可以这样做。

从active菜单中移除home课程，并在下面添加特定的href。

<li class="active"><a href="/home/">Home</a></li>

<强>的jQuery

$(function () {
    $('ul.navbar-nav > li > a').each(function () {            
        if (window.location.pathname.indexOf($(this).attr('href')) > -1) {
            $(this).closest('li').addClass('active');
            return false;
        }
    });
});

Answer 2

更新：你的李没有一个活跃的类，然后在页面加载时添加活动类。

/menu.html

<ul class="nav navbar-nav">
    <li class="home"><a href="/">Home</a></li>
    <li class="work"><a href="/work/">work</a></li>
    <li class="methods"><a href="/methods/">methods</a></li>
    <li class="blog"><a href="/blog/">blog</a></li>
    <li class="team"><a href="/team/">team</a></li>
    <li class="contact"><a href="/contact/">contact</a></li>
</ul>

js可能是这样的

var page = window.location.pathname.split('/')[1];
$('li.' + page).addClass('active');

Answer 3

项目中只有一个文件，对吧？

我会复制整个ul导航栏并将其粘贴到每个页面中。之后您要做的就是将活动类放在相应的li元素上。

Answer 4

您可以尝试以下内容

$(function()
 {
   $('ul.navbar-nav li').click(function(event)
   {
    $('ul.navbar-nav li').removeClass('active');
    $(this).addClass('active');
    event.preventDefault();
   });
});

防止默认会避免锚标记标记默认操作重新加载页面。所以这应该有用。

或者，如果您不需要转到另一个页面，那么您可以使用div而不是锚标记。您可以使用：hover css selector来模拟锚标记行为。

div:hover
{
  color:blue;
  cursor:pointer;
  font-style:underline;
}

Answer 5

这似乎有效：

HTML：

<ul class="nav navbar-nav">
    <li id="liHome"><a href="/">home</a></li>
    <li id="liWork"><a href="/work/">work</a></li>
    <li id="liMethods"><a href="/methods/">methods</a></li>
    <li id="liBlog"><a href="/blog/">blog</a></li>
    <li id="liTeam"><a href="/team/">team</a></li>
    <li id="liContact"><a href="/contact/">contact</a></li>
</ul>

事件处理程序：

$('ul.navbar-nav li').click(function(){
    window.sessionStorage.activeMenuItem = this.id;
});

页面加载后：

if (window.sessionStorage.activeMenuItem) {
    $("#"+sessionStorage.activeMenuItem).addClass('active');
}

来自https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage：

只要浏览器处于打开状态，页面会话就会持续，并且会在页面重新加载和恢复后继续存在。

此解决方案的一个问题是您无法在新窗口中打开链接，因为：

在新标签页或窗口中打开页面将导致启动新会话，这与会话Cookie的工作方式不同。

Answer 6

您可能处于以下三种情况之一：

A ）您拥有一系列具有独特内容的静态HTML页面。

B ）您正在使用服务器端语言并执行一些基本的includes

C ）您正在使用带有路由逻辑的框架。

A 如果您有两个页面都包含菜单代码，那么它就像移动默认活动类一样简单。

<!-- Home -->
<ul class="nav navbar-nav">
    <li class="active"><a href="/">Home</a></li>
    <li><a href="/work/">work</a></li>
    …
</ul>

<!-- Work -->
<ul class="nav navbar-nav">
    <li><a href="/">Home</a></li>
    <li class="active"><a href="/work/">work</a></li>
    …
</ul>

B 假设您正在使用PHP，那么以下内容是传递此信息的简便方法：

// menu.php
<ul class="nav navbar-nav">
    <li <?php if($page = 'home'){ echo 'class="active"' } ?>><a href="/">Home</a></li>
    …
</ul>

// home.php
<?php
  $page = 'home';
  include(menu.php);
  …

C 这在很大程度上取决于您正在使用的框架，但大多数都会有可以访问当前路径的模板助手，例如：

<ul class="nav navbar-nav">
    <li <% is_route('home') class="active" %>><a href="/">Home</a></li>

但是在使用javascript或使用会话或cookie状态加载DOM之后添加类可能是最重要的。

单击链接

6 个答案: