Question

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

离）点击menu1 text - ＆gt; div class =“wrap menu1”，

点击menu2 text - ＆gt; div class =“wrap menu2”

他们应该是toggleClass。请帮忙〜

<div class="wrap">
    <div class = "menu m1"><a href="#box1"> menu 1</a></div> 
    <div class = "menu m2"><a href="#box2"> menu 2</a></div>
    <div class = "menu m3"><a href="#box3"> menu 3</a></div>
</div>

<div class ="content" id="box1">
box 1 content
</div>

<div class ="content" id="box2">
box 2 content
</div>

<div class ="content" id="box3">
box 3 content
</div>


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

});


.wrap { overflow:hidden;} 
.menu {float:left; width:33.3%;font-size:2em; curser:pointer;}
.content{display: none; border:1px solid #000}
.on {color:#red}

.wrap.menu1 { background:red;}
.wrap.menu2 { background:blue;}
.wrap.menu3 { background:green;}

Answer 1

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

＆＃13;

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

＆＃13;

.wrap {
  overflow: hidden;
}
.menu {
  float: left;
  width: 33.3%;
  font-size: 2em;
  curser: pointer;
}
.content {
  display: none;
  border: 1px solid #000
}
.on {
  color: #red
}
.wrap.menu1 {
  background: red;
}
.wrap.menu2 {
  background: blue;
}
.wrap.menu3 {
  background: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
    <div class="menu m1"><a href="#box1"> menu 1</a></div>
    <div class="menu m2"><a href="#box2"> menu 2</a></div>
    <div class="menu m3"><a href="#box3"> menu 3</a></div>
</div>
<div class="content" id="box1">box 1 content</div>
<div class="content" id="box2">box 2 content</div>
<div class="content" id="box3">box 3 content</div>

＆＃13;

Answer 2

您可以使用$(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);
});

Answer 3

请尝试此

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

DEMO

在父div上切换类名

3 个答案: