Question

我有一个导航栏，其中包含由foreach循环从数据库加载的链接，导航栏是静态的，因此只有内容在变化。我想在页面加载活动时向链接添加“活动”类。

我试图在单击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');
  });
});

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

我希望它有所帮助

Answer 2

下面的函数将类激活添加到指向您当前页面的所有链接。

$(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/

Answer 3

根据我从您的上下文中理解的内容，您尝试在重新加载页面时动态地将类设置为dom元素？

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

我认为你应该：在您的网页中使用iframe，这将是您重新加载的网页的唯一部分。
或者使用ajax，您将包含当前页面内容的部分替换为新页面的内容

Answer 4

你可以使用 $（选择器）.toggleClass（＆＃39;有源＆＃39）; $（本）.addClass（＆＃39;有源＆＃39）;

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>

我希望这会对某人有所帮助

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


    });

加载页面后，将类添加到li

6 个答案: