Javascript 在父div上切换类名

我有3个菜单，每个都有不同的div。 当单击类名“wrap”上的#box1时，如何添加/删除类

ex） 单击菜单1文本->div class=“包装菜单1”

单击菜单2文本->div class=“包装菜单2”

他们应该在课堂上交换。 请帮忙~

这里演示-

框1内容
框2内容
框3内容
$（“a”）。单击（函数（）{
var myelement=$（this.attr（“href”）
$（myelement）.slideToggle（“慢”）；
$（“.content:visible”）.not（myelement.hide（）；
});
.wrap{溢出：隐藏；}
.菜单{浮点：左；宽度：33.3%；字体大小：2em；光标：指针；}
.content{显示：无；边框：1px实心#000}
.on{color:#red}
.wrap.menu1{背景：红色；}
.wrap.menu2{背景：蓝色；}
.wrap.menu3{背景：绿色；}

您可以使用锚点父元素的索引

$（“a”）。单击（函数（）{
var myelement=$（this.attr（“href”）
$（myelement）.slideToggle（“慢”）；
$（“.content:visible”）.not（myelement.hide（）；
$（'.wrap'）.removeClass（'menu1 menu2 menu3'）.addClass（'menu'+（$（this.parent（）.index（）+1））；
});
.wrap{
溢出：隐藏；
}
.菜单{
浮动：左；
宽度：33.3%；
字号：2em；
游标：指针；
}
.内容{
显示：无；
边框：1px实心#000
}
.在{
颜色：红色
}
.wrap.menu1{
背景：红色；
}
.wrap.menu2{
背景：蓝色；
}
.wrap.menu3{
背景：绿色；
}

框1内容
框2内容
框3内容
您可以使用锚父元素的索引


$（“a”）。单击（函数（）{
var myelement=$（this.attr（“href”）
$（myelement）.slideToggle（“慢”）；
$（“.content:visible”）.not（myelement.hide（）；
$（'.wrap'）.removeClass（'menu1 menu2 menu3'）.addClass（'menu'+（$（this.parent（）.index（）+1））；
});
.wrap{
溢出：隐藏；
}
.菜单{
浮动：左；
宽度：33.3%；
字号：2em；
游标：指针；
}
.内容{
显示：无；
边框：1px实心#000
}
.在{
颜色：红色
}
.wrap.menu1{
背景：红色；
}
.wrap.menu2{
背景：蓝色；
}
.wrap.menu3{
背景：绿色；
}

框1内容
框2内容
框3内容
您可以使用
$（this）.parent（）.index（）
获得父元素的索引

然后删除这些类并根据单击的元素添加一个类

下面是修改后的代码段

$("a").click(function(){
    var myelement = $(this).attr("href")
    $(myelement).slideToggle("slow");  
    $(".content:visible").not(myelement).hide();
    var parent_idx = $(this).parent().index() + 1;
    $(".wrap").removeClass("menu1 menu2 menu3").addClass("menu" + parent_idx);
});

您可以通过使用
$（this）.parent（）.index（）
来获得父元素的索引

然后删除这些类并根据单击的元素添加一个类

下面是修改后的代码段

$("a").click(function(){
    var myelement = $(this).attr("href")
    $(myelement).slideToggle("slow");  
    $(".content:visible").not(myelement).hide();
    var parent_idx = $(this).parent().index() + 1;
    $(".wrap").removeClass("menu1 menu2 menu3").addClass("menu" + parent_idx);
});

请试试这个

$("a").click(function(){
    alert($(this).text())
    var myelement = $(this).attr("href");
    $(myelement).slideToggle("slow");  
    $(".content:visible").not(myelement).hide();
    $('.wrap').removeClass('menu1 menu2 menu3').addClass($(this).text());
});

请试试这个

$("a").click(function(){
    alert($(this).text())
    var myelement = $(this).attr("href");
    $(myelement).slideToggle("slow");  
    $(".content:visible").not(myelement).hide();
    $('.wrap').removeClass('menu1 menu2 menu3').addClass($(this).text());
});

请检查我的答案请检查我的答案我不知道我的方法是否正确。。哪一个是好办法？。。我只是一个初学者。。。只是古玩$（'.wrap'）.removeClass（'menu1 menu2 menu3'）.addClass（$（this.text（））@RinoRaj你可以。。。但是有一个空格
菜单1
，您可以删除它it@RinoRaj您可以这样做--但更好的解决方案是使用
data-*
属性，如Oh great。。。我会记住的。。。数据-*属性我不知道我的方法是否正确。。哪一个是好办法？。。我只是一个初学者。。。只是古玩$（'.wrap'）.removeClass（'menu1 menu2 menu3'）.addClass（$（this.text（））@RinoRaj你可以。。。但是有一个空格
菜单1
，您可以删除它it@RinoRaj您可以这样做--但更好的解决方案是使用
data-*
属性，如Oh great。。。我会记住的。。。数据-*属性询问您的答案。当再次单击同一菜单时，如何删除类？谢谢您的回答。当再次单击同一菜单时，如何删除类？