Question

我有一个简单的导航菜单。主页链接有一个下拉活动类。我需要这样做：当用户按下例如文章链接时，jquery必须从Home中删除下拉活动类并将此类设置为选定的链接。我知道我可以使用removeClass和addClass，但是当重新加载页面时我需要保留选定的链接类。我听说过cookies和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>

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 = //在这里获取php val;

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

}）;

Answer 3

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

下面的函数将检查用户或访客正在查看的页面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");
    })
  });

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

Answer 4

对我有用的是什么：

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


    });

Answer 6

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

Answer 7

这应该有所帮助。同样添加.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");
        }
    });
});

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

7 个答案: