页面加载后将类添加到li元素

Question

我有一个导航栏，链接是通过foreach循环从数据库加载的，导航栏是静态的，只有内容在变化。当页面被加载并处于活动状态时，我想在链接中添加“Active”类。

我尝试了简单地在单击li元素时添加类，但是当重新加载页面时，该类会消失。

这是我的HTML（它是由PHP foreach循环呈现的，因此它看起来不像硬编码）

<div class="sidebar-menu">
  <ul class="sidebar-nav">
    <li class="icon_links">
      <a href="/home" class="links">
        <div class="icon">
          <i class="fa fa-tasks" aria-hidden="true"></i>
        </div>
        <div class="title">Dashboard</div>
      </a>
    </li>
    <li class="icon_links">
      <a href="/messaging" class="links">
        <div class="icon">
          <i class="fa fa-comments" aria-hidden="true"></i>
        </div>
        <div class="title">Messaging</div>
      </a>
    </li>
  </ul>
</div>

JavaScript

$(document).ready(function() {
  var selector = '.sidebar-nav li';
  $(selector).on('click', function() {
    $(selector).removeClass('active');
    $(this).addClass('active');
  });
});

- RoyBar

---

当重新加载时，li将不会具有active类。仅在单击时它才会添加类（根据您的代码）。您是否希望在页面重新加载时保持相同的高亮显示？ - Samir

您需要在页面加载时选择它。这是一个常见的问题，希望有人能找到一个重复的解决方案。 - epascarello

最初，您必须使用PHP将类激活到当前li。 - Nil

Answer 1

你需要做类似这样的事情：

    var selector = '.sidebar-nav li';
    var url = window.location.href;
    var target = url.split('/');
     $(selector).each(function(){
        if($(this).find('a').attr('href')===('/'+target[target.length-1])){
          $(selector).removeClass('active');
          $(this).removeClass('active').addClass('active');
        }
     });

我希望它能够帮助到你

- Abhay Maurya

---

没问题。愉快编程！ - Abhay Maurya

我需要进行更改，把 ===('/'+target[target.length-1]) 改为 ===(target[target.length-1])。 - Carlos

@Carlos，是的，这取决于您在代码中如何使用href。对于所提出的问题，它是这样的href="/messaging"，所以我添加了/。如果您的href没有任何/，那么您就不需要添加它。 - Abhay Maurya

在我的情况下，首先运行代码，删除/添加“active”类，然后重新加载，在其结果中，所有默认设置都会再次回来。 - RegarBoy

Answer 2

下面的函数会将指向当前页面的所有链接添加active类。

$(function(){
       $("a").each(function(){
               if ($(this).attr("href") == window.location.pathname){
                       $(this).addClass("active");
               }
       });
});

参考资料：https://css-tricks.com/snippets/jquery/highlight-all-links-to-current-page/

这是一个与当前页面所有链接进行高亮的 jQuery 代码段，它适用于导航菜单或其他类型的链接列表。在这个例子中，使用的类名是“active”，您可以根据需要更改此名称。

- Rafał Cz.

Answer 3

从您的上下文中，我理解您是在重新加载页面时动态设置DOM元素的类？

问题在于，使用直接链接/表单（具有正常行为），您将重新加载当前页面（或移动到新页面），这会取消您当前的修改并使页面恢复到最初的状态。

我认为您应该：

• 在页面内使用iframe，它将是重新加载的页面中唯一需要重新加载的部分。
  
• 或者使用ajax，用新页面的内容替换包含当前页面内容的部分。

- MI53RE

Answer 4

你可以使用以下代码： $(selector).toggleClass('active'); $(this).addClass('active');

- Hitesh Jangid

Answer 5

我使用简单的方法。

<script>
        var header = document.getElementById("ActiveId");
        var btn = header.getElementsByClassName("btn");
        for (var i = 0; i < btn.length; i++) {
            btn[i].addEventListener("click", function () {
                var current = document.getElementsByClassName("active");
                current[0].className = current[0].className.replace(" active", "");
                this.className += " active";
            });
        }
    </script>

我希望它能帮助到某人

- PatsonLeaner

Answer 6

// 将此代码直接添加到您的js文件中，行：0

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