Question

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

如果单击btn1， link1应该获得class =＆＃34; activemenu＆＃34; ，并且应显示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

DEMO

使用$("a").click(function(){ var myelement = $(this).attr("href") $(myelement).slideToggle("slow"); $(this).toggleClass("activemenu"); $(".trigger").not($(this)).removeClass("activemenu"); $(".toggle:visible").not(myelement).hide(); });选择点击的元素

format()

Answer 2

好的，我理解你的要求和我的错误，这就是那条线：

$('.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();
});

Answer 3

首先从所有.toogle元素中删除该类。

$("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 4

你的css条目我错了。放＆＃39;。＆＃39;在activemenu之前

Answer 5

您可以尝试添加数据框，只需显示它们：

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

<强> Jquery的

$(this)

Working Fiddle

如果显示div，则显示不同的div并添加类

5 个答案: