jquery活动菜单在点击链接后丢失

jquery active menu lost after clicking on link

本文关键字：链接 活动 菜单 jquery      更新时间：2023-09-26

所以我有一个简单的菜单，我试图将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中的初始活动类。我觉得我已经做了很多次了，从来没有遇到过这个问题。也许我错过了什么。

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

从home菜单中删除active类，并添加特定的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;
        }
    });
});

您的项目中不止一个文件，对吧？

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

更新：您的li都不应该有活动类，然后在页面加载时添加活动类。

/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');

您可以尝试以下内容

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

"防止默认"将避免锚定标记标记重新加载页面的默认操作。所以这应该有效。

或者，如果您不需要转到另一个页面，那么您可以使用div来代替锚点标记。您可以使用：hover-css选择器模拟锚点标记行为。

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

这似乎在起作用：

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的工作方式不同。

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

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加载DOM或使用会话或cookie状态之后添加类可能会过于夸张。

相关文章：