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

Question

我有一个简单的导航菜单。主页链接具有下拉激活类。我需要这样做： 当用户按下例如文章链接时，jQuery必须从主页中删除下拉激活类并将此类设置为所选链接。我知道可以使用removeClass和addClass，但我需要在页面重新加载时保留选定的链接类。我听说过使用cookie和localStorage来设置类，但我不知道如何操作。有人能帮帮我吗？

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

- anhelo

---

请根据菜单名称提供您的 href 链接。 - Ahosan Karim Asik

我认为一个简单的解决方案是在服务器端设置类。你使用的服务器端语言是什么？你使用框架吗？如果是这样，你可以使用模板引擎来实现这个目标，避免呈现和“逻辑”之间的耦合。 - Leonardo Manrique

Answer 1

您可以以下方式在jQuery中使用：

您可以这样在jQuery中使用：

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

- Ahosan Karim Asik

---

当我打开网站时，所有链接都会获得下拉活动类，并且当我单击其他链接时，下拉活动类将重置。我的href类似于：http://localhost/thoughts/quotes，http://localhost/interesting/articles等 :) - anhelo

然后将 $(".dropdown").attr("class","dropdown"); 这段代码添加到 else 块中。 - Ahosan Karim Asik

仍然无法正常工作。所有链接都获得下拉活动类，当我点击链接时，所有li类都会更改为下拉菜单。 - anhelo

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', '在此处放置li的类名', 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');  

});

- varun kumar

---

点击链接后页面重新加载时必须保持下拉菜单的活动类，所以我认为这段代码是不正确的。 :) - anhelo

我正在使用CI框架。采用这段代码不会是一件容易的事情。如果cookie不是存储的好方法，那么最好的方法是什么？ - anhelo

我建议使用URL参数。 - varun kumar

你能给我展示一个例子吗？因为我只是一个初学者 :) - anhelo

这篇文章可能会对你有所帮助！它介绍了如何从GET请求中获取参数，是关于CodeIgniter编程的内容。 - varun kumar

Answer 3

对我有效的方法：

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

- Alexey

Answer 4

我曾面临过类似的问题，但这个方法对我很有效。考虑到你的结构，我首先建议你为每个元素分配与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');
});

- Toluwanimi Ade-ojo

Answer 5

回答：将以下代码直接添加到你的 `file.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;
                }
            }


    });

- Abdelhakim Ezzahraoui

Answer 6

我能够在简单的 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>元素进行操作，请稍微更改一下函数。

- Adriano Monecchi

Answer 7

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

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

- Wanderer