Переключить имя класса на родительский div

Question

У меня есть 3 меню и у каждого есть разные Div. Как добавить/удалить класс, когда нажимаете # box1 на имя класса «wrap»?

ех) нажмите текст menu1 -> класс сНу = "завернуть Меню1",

нажмите menu2 текст -> DIV класс = "завернуть menu2"

и они Шоул быть toggleClass. пожалуйста, помогите ~

Demo здесь - http://jsfiddle.net/5zzzhmj8/1/

<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

Пожалуйста, попробуйте это

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

Answer 2

Вы можете использовать индекс якоря родительского элемента

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

.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; 
 
}

<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>

Answer 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); 
});