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

Jquery add class and keep when page reload

本文关键字：加载 保留 新加载 添加 Jquery      更新时间：2023-09-26

我有一个简单的导航菜单。主页链接有一个下拉活动类。我需要这样做：当用户按例如文章链接时，jquery必须从主页中删除下拉活动类并将此类设置为所选链接。我知道我可以使用 删除类 和 添加类 ，但是当页面重新加载时，我需要保留选定的链接类。我听说过 cookie 和本地存储来设置类，但我不知道如何。有人可以帮助我吗？ 

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

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

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

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

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

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

set_page.php

setcookie（'nav'， 'put-the-li-classname-here'， time（），'/'）;

receive_page.php

$getnav = $_COOKIE['nav'];

.js

var 变量 1 =//在此处获取 PHP 值;

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

}）;

我能够在一个简单的HTML网站上使用它。

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

考虑您自己的 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>元素，请稍微更改函数。

对

我有用的东西：

<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");
    }
});

答案>>>直接将此代码添加到您的文件中.js在上面

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;
                }
            }

    });

我遇到了类似的挑战，但这对我有用。考虑到你的结构，我首先建议你给每个人一个与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');
});

这应该会有所帮助。.each也添加到卡里姆·阿西克解决方案@Ahosan。

$(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");
        }
    });
});
相关文章：