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

时间:2016-11-09 12:09:53

标签: javascript php jquery html

我有一个导航栏,其中包含由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');
  });
});

6 个答案:

答案 0 :(得分:6)

你需要做这样的事情:

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

我希望它有所帮助

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

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

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

答案 3 :(得分:0)

你可以使用      $(选择器).toggleClass(&#39;有源&#39);      $(本).addClass(&#39;有源&#39);

答案 4 :(得分:0)

  

我使用简单的方法

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

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

答案 5 :(得分:0)

  

//将此代码直接添加到您的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;
                }
            }


    });