首页 文章

Javascript错误：'undefined is not a function'尝试删除并向li元素添加类时[关闭]

提问于
浏览 次
0

我有一个容器，其中 li 元素嵌套在 ul 元素中 . 我正在尝试使用Javascript删除并添加一个名为 active 的类，当选择容器中的li元素时 . 但是，当我单击该类时，既未添加也未删除 li element class . 当我在浏览器中检查Web开发人员时，收到消息 'undefined is not 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>

任何帮助是极大的赞赏！

javascript jquery html css

2 回答

  • 4

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

    回复于
  • -3
    <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'

    回复于

相关问题