javascript - 显示不同的 div 并在显示 div 时添加类

Question

我想根据点击的链接显示一个 div。

如果单击 btn1，link1 应该得到 class="activemenu" 并且应该显示 div1。如果再次单击 btn1，则应删除类并隐藏 div。

如果单击 btn2，div2 也应该发生同样的情况。

如果一个 div 已经打开(例如，div1 可见，因为单击了 btn1)，div1 应该隐藏，类应该从 btn1 中删除并添加到 btn2，div2 应该显示。

btn3 和 div3 也会发生同样的情况。

div 显示正确，但不会添加或删除类。

HTML:

<div> 
 <a class="trigger" id="btn1" href="#box1"> Heading 1</a>
 <a class="trigger" id="btn2"  href="#box2"> Heading 2</a>
 <a class="trigger" id="btn3" href="#box3"> Heading 2</a>
</div>
<div class ="toggle" id="box1">box one content</div>
<div class ="toggle" id="box2">box two content</div>
<div class ="toggle" id="box3">box three content</div>

CSS:

div {float:left;padding:20px}
h3 {font-size:2em; curser:pointer;}
div.toggle{display: none;}
.activemenu{font-size: 100px;}

JS:

$("a").click(function(){
  var myelement = $(this).attr("href")
  $(myelement).slideToggle("slow");
  $(myelement).toggleClass("activemenu");
  $(".toggle:visible").not(myelement).hide();
});

Demo Code (not working properly)

非常感谢

Answer 1

好的，我明白你的要求和我的错误，这是那一行:

$('.trigger:not(#'+this.id+')').removeClass("activemenu");

还将 myelement 更改为 this

$(this).toggleClass("activemenu");

因此，它将从所有切换 div 中删除 activemenu 类，然后您可以再次添加相同的类。

这里是 updated code

$("a").click(function(){
   var myelement = $(this).attr("href")
   $(myelement).slideToggle("slow");
   $('.trigger:not(#'+this.id+')').removeClass("activemenu");
   $(this).toggleClass("activemenu");
   $(".toggle:visible").not(myelement).hide();
});