javascript - jquery中添加/删除类的问题

Question

我正在尝试创建一个类似于选项卡但带有垂直按钮的菜单导航。当我启动页面时，第一个 li 类被删除，当我单击任何其他链接时，除了显示我的内容 div 之外，什么也没有发生。 .

第一个链接应始终在页面开始时处于事件状态。

<script type="text/javascript">
$(document).ready(function() {

    var tabContainers = $('div.pages > div');

    $('div.sidemenu ul.list a').click(function () {
        tabContainers.hide().filter(this.hash).show();

        $('div.sidemenu ul.list li').removeClass('active');
        $(this).addClass('active');

        return false;
    }).filter(':first').click();


});
</script>
<div class="sidemenu">
  <ul class="list"> 
 <li class="active"><a href="#first">Login & Password</a></li>
 <li><a href="#second">Contact Details</a></li>
 <li><a href="#third">Company & Branch Details</a></li>
 <li><a href="#forth">Address Details</a></li>
  </ul>
</div>

<div class="pages">
  <div id="first">
    CONTENT 1
  </div>
  <div id="second">
    CONTENT 2
  </div>
  <div id="third">
    CONTENT 3
  </div>
  <div id="forth">
    CONTENT 4
  </div>
</div>

不知道我在这里错过了什么..也许是因为我刚刚醒来，还在喝第一杯咖啡..;)

Answer 1

您正在将该类添加到 <a>元素，但将其从其父元素 <li> 中删除元素。

$(this).addClass('active');  // "this" is the <a> that received the event

   // This removes "active" from the <li>
$('div.sidemenu ul.list li').removeClass('active');

看起来您打算使用 <li>上课。所以你应该这样做:

$(this).parent().addClass('active');

或者，如果您不介意我混合一点 DOM API:

$(this.parentNode).addClass('active');

现在去补充一下吧! ;o)