Question

我有一个容器， li 元素嵌套在 ul 元素中。我正在尝试使用Javascript删除并添加一个名为活动的类，当选择容器中的li元素时。但是，当我单击该类时，既未添加或删除 li元素类。当我在浏览器中检查Web开发人员时，收到消息'undefined is is a function'

HTML：

<div class="about_nav">
    <ul>
        <li class="active"><a href="#story">Our Story</a></li>
        <li><a href="#blocks">International Blocks</a></li>
        <li><a href="#works">How it works</a></li>
        <li><a href="#gift">The Perfect Gift</a></li>
    </ul>    
</div>

CSS：

.about_nav {
   background: no-repeat #FFF 12px 3px;
   box-shadow:0 0 10px rgba(0, 0, 0, 0.41);
   width:25%;
   margin:35px 20px 20px 70px;
   float:left;
   position:fixed;
}

.about_nav ul {
   margin-top:0;
   margin-bottom:0;
   padding-left:0;
   list-style:none;
   background-color:#FFF;
}

.about_nav li {
   margin-top:2px;
   margin-left:0px;
   position:relative;
   display:block;
}

.about_nav li:hover {
   background:#eee;
   border-radius:4px;  
}

.about_nav li>a {
   color:#428bca;
   text-decoration:none;
   padding:10px 15px;
   position:relative;
   display:block;
 }

.about_nav li>a:hover {
   color:#2a6496;
   text-decoration:none;
   border-radius:4px;
 }

.about_nav li.active>a,
.about_nav li.active>a:hover,
.about_nav li.active>a:focus {
   color:#FFF;
   background-color:#428bca;
 }

使用Javascript：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
   $( document ).ready(function() {
   $('.about_nav li').on('click', function(e) {
    $('.about_nav li').removeClass('active');
    $(this).addClass('active');
      });
   });
</script>

非常感谢任何帮助！

Answer 1

你正在使用一个严重过时的jQuery版本。问题是在版本 1.7 之前未添加.on()。您正在使用 1.4 。升级你是jQuery版本，它应该可以正常工作。

Answer 2

<div class="about_nav">
    <ul>
        <li class="item"><a href="#story">Our Story</a></li>
        <li class="item"><a href="#blocks">International Blocks</a></li>
        <li class="item"><a href="#works">How it works</a></li>
        <li class="item"><a href="#gift">The Perfect Gift</a></li>
    </ul>    
</div>

 $('.item').on('click', function(this){
    $('.item').removeClass('active');
    $(this).addClass('active');
      });

实际上，我为你点击的每个项目添加了相同的类，它被称为全局类，然后当有人按下这个项目时，你只需从具有“item”类的所有项中删除活动类。

$（'。about_nav'）。onclick不起作用，因为你捕获的点击不是来自ul'parrent'，而是形成了ul li'childs'

Javascript错误：尝试删除并向li元素添加类时，'undefined不是函数'

2 个答案: