Jquery 添加 class 并在页面重新加载时保留

Question

我有一个简单的导航菜单。首页 link 有一个下拉菜单处于活动状态 class。我需要这样做：例如，当用户按下文章 link 时，jquery 必须从主页中删除活动的下拉列表 class，并将此 class 设置为选中的 link。我知道我可以使用 removeClass 和 addClass ，但我需要在重新加载页面时保持选择 link class 。听说cookies和localstorage可以设置class，但是不知道怎么设置。有人能帮我吗？

   <ul>
    <li class="dropdown active"><a>Home</a></li>
    <li class="dropdown"><a>Articles</a></li>
    <li class="dropdown"><a>About</a></li>
   </ul>

Answer 1

您可以这样与 jquery 一起使用：

$(document).ready(function(){
        if($(".dropdown  a").attr("href")==window.location.href){
            $(".dropdown").attr("class","dropdown active");
        }
       else{
          $(".dropdown").attr("class","dropdown");
         }
    });

Answer 2

只需检查一次是否有任何错误，这应该可以解决您的问题。

   <ul class="nav">
    <li class="dropdown active"><a>Home</a></li>
    <li class="dropdown"><a>Articles</a></li>
    <li class="dropdown"><a>About</a></li>
   </ul>

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

或使用 cookie（理想情况下不是很好的选择）

set_page.php

setcookie('nav', 'put-the-li-classname-here', time(),'/');

receive_page.php

$getnav = $_COOKIE['nav'];

js

var variable1 = // get the php val here;

$(document).ready(function(){
     $('.navt li').removeClass('active');
       $('.'+variable1).addClass('active');

});

Answer 3

这应该有所帮助。也添加 .each @Ahosan Karim Asik 解决方案。

$(document).ready(function(){           
    $(".dropdown  a").each(function(){              
        if($(".dropdown  a").attr("href")==window.location.href){
            $(".dropdown").attr("class","dropdown active");
        }
        else{
            $(".dropdown").attr("class","dropdown");
        }
    });
});

Answer 4

我可以在一个简单的 HTML 网站上运行它。

下面的函数将检查用户或访问者正在查看的页面 URL，并与菜单项上的页面进行比较。如果它们匹配，它会将 .active class 添加到该菜单项。

考虑到您自己的 HTML 结构，请尝试以下操作：

// Navigation Markup, let's add an id for easy targeting.

<ul id="nav">
    <li class="dropdown"><a>Home</a></li>
    <li class="dropdown"><a>Articles</a></li>
    <li class="dropdown"><a>About</a></li>
</ul>

// The JS

  jQuery(function() {
    var pgurl = window.location.href.substr(window.location.href
      .lastIndexOf("/")+1);
    jQuery("#nav ul li a").each(function(){
      if(jQuery(this).attr("href") == pgurl || jQuery(this).attr("href") == '' )
        jQuery(this).addClass("active");
    })
  });

注意：该函数针对 <ul> 列表中的 <a> 元素。为了定位 <li> 元素，稍微更改函数。

Answer 5

对我有用的：

<nav class="nav">
  <a class="nav-link" href="/">Блог</a>
  <a class="nav-link" href="/loler">Об авторе</a>
</nav>

$(document).ready(function() {
    const regex = /http:\/\/.*\/(.*)\//g;
    const match = regex.exec(window.location.href);
    // iterate over all and find match
    if (match) {
        $(".nav-link").each(function() {
            if ($(this).attr("href").slice(1) == match[1]) {
                $(this).addClass("active");
            }
        });
    }
    // set active first element
    else {
        $(".nav-link:first").addClass("active");
    }
});

Answer 6

The Answer >>> add this code directly in your file.js in above

var url = window.location.href;
var tg = url.split('/');

    jQuery('.navbar-light .navbar-nav .nav-link').each(function(){

        url_this = jQuery(this).attr("href");
        var ts = url_this.split('/');


            if(decodeURIComponent(tg[tg.length -2]) === decodeURIComponent(ts[ts.length -1]) ){
                jQuery(this).addClass('active');
                return false;
            }else{
                if(decodeURIComponent(tg[tg.length -2]) === decodeURIComponent(ts[ts.length -2]) ){
                    jQuery(this).addClass('active');
                    return false;
                }
            }


    });

Answer 7

我遇到了类似的挑战，但这对我有用。考虑到你的结构，我首先建议你给每个一个对应于 a 标签的 id

<ul>
<li id="Home" class="dropdown"><a href="Home">Home</a></li>
<li id="Articles" class="dropdown"><a href="Articles">Articles</a></li>
<li id="About" class="dropdown"><a href="About">About</a></li>

$(document).ready(function() {
  var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
  var id = "#" + pgurl;
  $(id).attr('class', 'active');



});

请注意，id 的命名法与超链接的命名法最相符。例如，在 href 为“.html”或 .php 的情况下：

<li id="Articles" class="dropdown"><a href="Articles.php">Articles</a></li>

然后使用 substring() 和 indexOf() 方法。

$(function(){

   var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
   var id = "#"+pgurl.substr(0, pgurl.indexOf("."));

      $(id).attr('class','active');
});

Jquery 添加 class 并在页面重新加载时保留

Jquery add class and keep when page reload

html

javascript

cookies

jquery

local-storage