Question

＆＃13;

 
jQuery(function($) {
    var path = window.location.href; 
    $('ul li').each(function() {
        if (this.href === path) {
            $(this).addClass('active');
        }
    });
});

＆＃13;

<ul id="nav" class="nav navbar-nav">
    <li class="active"><a href="a.php">A</a></li>
    <li><a href="b.php">Bs</a></li>
    <li><a href="c.php">C  </a></li>
</ul>

＆＃13;

我想改变班级=＆＃34;活跃＆＃34;在点击列表项目中。

Answer 1

<li id="a" ><a href="a.php">A</a></li>

 Using $('#a').attr('class', 'active')

输出：

    <li id="a" class='active' ><a href="a.php">A</a></li>

Answer 2

问题是你正在检查li元素的href属性，该属性不存在。您需要检查li元素内部的a标签，以获取href属性，如下所示：

if ($(this).find('a').attr('href') === path) {
    $(this).addClass('active');
}

Answer 3

您可以使用：

$(this).toggleClass('class1 class2')

Answer 4

如果您要更改活动类和html页面，这将是一种有效的方法。如果您只想更改活动类，请仅使用前4行代码。

$( document ).ready(function() {  
    $(".nav li").click(function() {        
    $(".nav li.active").removeClass("active");      
    $(this).addClass("active");       
    if($(this).attr('id')=="yourfirstlinkid"){           
    document.getElementById("content").innerHTML='<object type="text/html" data="yoursite" height="90% width="90%" ></object>';       
    }else if($(this).attr('id')=="otherid"){        
    document.getElementById("content").innerHTML='<object type="text/html" data="othersite"></object>';                
    }else{                 
    document.getElementById("content").innerHTML='<div/>';
    }
        });

    });

然后你需要对你的HTML做的就是

 <ul class="nav">
  <li class="active" id="whateveryouwant"><a href="#anything you want">A</a></li>
   <li id="whateveryouwant" ><a href="#anything you want">Bs</a></li>
   <li id="whateveryouwant"><a href="#anything you want">C</a></li>
    </ul> 
<div align= "center" id="content"></div>

我想添加的另一件事是永远不要将herf用于导航栏，因为导航栏js代码将永远不会改变它的当前活动类。

如何将类添加到列表项

4 个答案: