Question

我有一个导航，通过使用活动类突出显示当前选定的导航点。当用户访问新导航点时，我想切换“旧”选定的导航点，并将新导航点的li元素的类切换为“活动”。

我遇到了jquery部分的问题，它只应该更改旧元素的li类的切换，并将该类添加到单击的li元素中。可能是一个标准情况，但我不知道一个好的和简单的解决方案。

示例（点击前）：

<ul class="x-navigation">
<li class="active">
    <a href="index.php"><span class="fa fa-desktop"></span> <span class="xn-text">Dashboard</span></a>                        
</li>
<li>
    <a href="index.php"><span class="fa fa-desktop"></span> <span class="xn-text">Dashboard2</span></a>                        
</li>
</ul>

结果（点击“Dashboard2”后）：

<ul class="x-navigation">
<li>
   <a href="index.php"><span class="fa fa-desktop"></span> <span class="xn-text">Dashboard</span></a>                        
</li>
<li class="active">
  <a href="index.php"><span class="fa fa-desktop"></span> <span class="xn-text">Dashboard2</span></a>                        
</li>
</ul>

我的尝试

$(".x-navigation li").on("click", "a", function(){
        event.preventDefault();
        //alert("test");

        ($this).parent().removeClass("active");
        ($this).addClass("active");

        //alert($this.child().href);
});

错误说明：

Uncaught ReferenceError: $this is not defined at this row: "($this).parent().removeClass("active");

点击的li元素不应该是$ this吗？我希望你们能帮我解决这个标准问题。

Answer 1

$在外面 parens。美元符号是您提供this作为参数的jQuery构造函数调用：

$(this).parent()

等等。

Answer 2

你的问题是告诉我你要将新导航点的li元素的类切换为＆＃34; active＆＃34; ，意思是你想要课程＆＃34;活跃＆＃34;放在您刚刚点击的链接的li上。

但你在这里做的是

($this).addClass("active");

是因为这个

而将您的类激活添加到您的锚元素

$(".x-navigation li").on("click", "a", function(){

也是这一部分：

($this).parent().removeClass("active");

应该是这样的，将$放在（this）之外：

$(this).parent().removeClass("active");

现在，如果你真的想要切换它，你可以简单地做到这一点：

$(".x-navigation li").on("click", "a", function(){
  event.preventDefault();
  $(this).parent().addClass("active").siblings().removeClass("active");
});

使用Jquery更改li元素的类

2 个答案: