如果显示div，则显示不同的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)

非常感谢您

来源

2016-02-02 sebi

在您的CSS中将'activemenu'改为'.activemenu'。类选择'.' – AdityaParab

好吧，我明白你的要求，我的错误，这里是该行：

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

也改变myelement到this

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

所以，它会删除activemenu从所有切换div的类，然后你可以再次添加相同的类。

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

来源

2016-02-02 08:08:06 Sachin

'toggleClass'的全部意义在于让您免于手动编写'addClass' /'removeClass'的责任。 :)当然，这会起作用，但你不觉得这违背了'toggleClass' API背后的精神吗？ :) – AdityaParab

违反精神，@AdityaParab？我们对jQuery的崇敬增长如此之多以至于我们现在面临着亵渎它的风险？ – lucas

好吧，我试图在网站上使用正确的代码，但jQuery抛出 **未捕获的错误：语法错误，无法识别的表达式：**在我 – sebi

首先从所有.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

来源

2016-02-02 08:07:22 RRK

http://jsfiddle.net/CkTRa/2593/更新演示它将类添加到div，而不是btn1/btn2/btn2 – sebi

@sebi我没有得到你。 – RRK

检查下面的答案，这是当链接被点击时应该发生的事情链接应该是粗体/更大的字体大小不是div元素的内容;） – sebi

你的CSS进入我错了。放'。“activemenu

来源

2016-02-02 08:08:41 Thanga

好点。但没有完全解决这个问题。给予好评。 – RRK

之前，您可以尝试添加一个数据盒，只是告诉他们这样的：

<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

来源

2016-02-02 08:10:08 Alexis

DEMO

我们e $(this)选择点击元素

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

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

    });

来源

2016-02-02 08:10:09

非常感谢，问题解决了。 – sebi

仍然是错误的..它不是删除'activemenu'类后再次点击..检查我更新的答案 – Sachin

@Sac：好点,,,解决 –

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

回答

相关问题