Question

我（据我的观点）阅读了有关此简单js突击队的所有其他主题。它将更改无序列表中元素的类。

但是它不起作用。

我在本地主机上工作，我有3个文件。 -index.php -stylesheet-sidemenu.css -sidemenu.js

在index.php的标题中，我将重定向到2个文件（css和js文件）。

这是我的html：`

<nav>   
    <ul class="nav">
        <li class="active">
            <a href="#"><span class="text">Afwijking</span> </a>
        </li>
        <li>
            <a href="#"><span class="text">Algemeen</span> </a>
        </li>
        <li>
            <a href="#"><span class="text">Frequentie</span> </a>
        </li>
        <li>
            <a href="#"><span class="text">Inleen</span> </a>
        </li>
    </ul>
</nav>

这里

在我的js /菜单中的js中

$('li').click(function(){

  $(this).addClass('active')
       .siblings()
       .removeClass('active');

});

这是我在css / sidemenu.css中的css

li{
  height:50px; 
  position:relative;
  background: linear-gradient(#292929, #242424);
}
a {
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid black;
  text-decoration:none;
  display:block;
  height:100%;
  width:100%;
  line-height:50px;
  color:#bbb;
  text-transform: uppercase;
  font-weight: bold;
  font-size:12px;
  font-family: Calabri, helvetica, arial;
  padding-left:10%;
  border-left:5px solid transparent;
  letter-spacing:1px;
  transition: all 0.3s linear;
}
.active a{
  color: #fcb600;
  border-left:5px solid #fcb600;
  background-color: #1B1B1B;
  outline:0;
}
li:not(.active):hover a{
  color: #eee;
  border-left: 5px solid #FCFCFC;
  background-color: #1B1B1B;
}

我的代码有什么问题？

Answer 1

啊！谢谢。我本来专注于代码本身。我完全忘了写

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

它的头部。我感谢大家的知识。

更改类jQuery不删除类

1 个答案: