显示不同的 div 并在显示 div 时添加 class

Question

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

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

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

如果一个 div 已经打开（例如 div1 是可见的，因为 btn1 被点击），div1 应该隐藏并且 class 应该从btn1 并添加到 btn2 并且 div2 应该出现。

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

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

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

首先从所有 .toogle 个元素中删除 class。

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

同时添加适当的 CSS 选择器。 .activemenu，您在使用时没有使用 . 运算符。

DEMO

Answer 2

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

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

也将 myelement 更改为 this

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

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

这里是 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();
});

Answer 3

你的css条目我错了。放 '。'在 activemenu

之前

Answer 4

您可以尝试添加一个数据框并像那样简单地显示它们:

<a class = "trigger" id="btn1" data-box="box1" href="#box1"> Heading 1</a> 
<a class="trigger" id="btn2" data-box="box2"  href="#box2"> Heading 2</a>
<a class="trigger" id="btn3" data-box="box3" href="#box3"> Heading 2</a>

Jquery

$(".trigger").click(function(){
  var element=$("#"+$(this).data("box"));
  element.toggle();
  $(".activemenu").removeClass("activemenu");
  $(element).toggleClass("activemenu");
});

Working Fiddle

Answer 5

DEMO

使用$(this)到select点击的元素

    $("a").click(function(){
   var myelement = $(this).attr("href")
    $(myelement).slideToggle("slow");

        $(this).toggleClass("activemenu");
    $(".trigger").not($(this)).removeClass("activemenu");
    $(".toggle:visible").not(myelement).hide();

  });

显示不同的 div 并在显示 div 时添加 class

Show different divs and add class if div is shown

html

javascript

css

jquery

toggleclass