切换div并添加和删除类

时间:2016-02-25 11:24:55

标签: javascript jquery

我有一些div我想切换我能够切换但是当我点击下一个div时无法移除类

的index.php

<div id="menu_top1" class="menu_top1">LINK 1</div>
<div id="menu_top" class="menu_top">LINK 2</div>
<div id="content_area1" style="display:none;">
  THIS IS LINK 1
</div>
<div id="content_area2" style="display:none;">
  THIS IS LINK 2
</div>

的jquery.js

$('#menu_top1').click(function() {

  $('#content_area1').toggle('slow', function() {
    $('.menu_top1').toggleClass('active');
  });
});

这是一个小提琴https://fiddle.jshell.net/kunz/t5u6mcmn/

2 个答案:

答案 0 :(得分:1)

如果您在点击链接时尝试显示相应的content_area并使链接处于活动状态?你可以检查一下 fiddle

我看到你为多个元素使用相同的id。只是编辑它们。

仍然需要所有元素的相同ID(严格不推荐),请检查此fiddle

答案 1 :(得分:0)

检查此更新的fiddle

$('.menu_top').click(function() {
  var index = $( this ).index() + 1;
  console.log(index);
  $('[id^="content_area"]' ).hide();
  $('#content_area' + index ).toggle('slow', function() {
    $('.menu_top').toggleClass('active');
  });
});