将类添加到父级

Question

我希望将元素的当前类添加到Jquery中的父div。

这是我的代码：

#sidebar { background-color:red;} /*this element change color by getting links classes*/
#contenerFAQ #sidebar.navigation ul.navigationFAQ li { 
background-color:#fff;
border-bottom:1px solid #f3f3f3
}
#contenerFAQ #sidebar.navigation ul.navigationFAQ li.active {
background:transparent;
}
.navigationFAQ h3:before {
background:url(imgs/icons-services/picto_groupe.svg);
content: "";
display: inline-block;
background-size:contain; 
background-repeat:no-repeat;
width: 2vw;
height: 2vw;
top: 0px;
position: relative;
opacity: 0.95;
vertical-align: middle;
margin-left:1.5vw;
}
#contenerFAQ #sidebar .titre {
background:#323232;
height: 4vw;
float: left;    
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;    
font-size: 1vw;
font-family:"lemonadaBold";
line-height: 12vw;
letter-spacing: 0.1em;
color: #ffffff;
text-transform: uppercase;
margin-right:1vw;
}
.navigationFAQ {
margin-right:1vw;
}
.navigationFAQ h3 a {
height:3vw;
line-height:3vw;
padding-left:1vw;
font-family:"dosisRegular";
text-transform:uppercase;
color:#333;
text-decoration:none;
font-size: 0.85vw;
}

<div id="sidebar" class="navigation">
<div class="titre">
<h2>Choisir un thème</h2>
</div>
<ul class="navigationFAQ">		
<li class="methode-icon"><h3><a href="#methode-section" class="backgroundLi methodeLink">Méthode naturelle</a></h3></li>
	<li class="education-icon"><h3><a href="#education-section" class="backgroundLi educationLink">Education canine</a></h3></li>
	<li class="pension-icon "><h3><a href="#pension-section" class="backgroundLi pensionLink">Pension canine</a></h3></li>
	<li class="toilettage-icon "><h3><a href="#toilettage-section" class="backgroundLi toilettageLink">Toilettage</a></h3></li>
</ul>
</div>

我希望将"pensionLink"，"toilettageLink"，"methodeLink"和"educationLink"类添加到 #sidebar。如果我们点击养老金链接，我们将类"养老金链接"添加到 #sidebar 等。 目标是通过 #sidebar 背景颜色与链接相同的类来更改背景颜色。

示例链接 1 已单击 示例链接 2 已单击

有人知道如何做到这一点吗？

谢谢:)

Answer 1

这应该根据您的要求工作：

$(".navigationFAQ li a").click(function() {
$("#sidebar").removeClass("methodeLink educationLink pensionLink toilettageLink").addClass($(this).attr('class').split(' ')[1])
})

演示

$(".navigationFAQ li a").click(function() {
$("#sidebar").removeClass("methodeLink educationLink pensionLink toilettageLink").addClass($(this).attr('class').split(' ')[1])
})

#sidebar {
background-color: red;
}
/*this element change color by getting links classes*/
#contenerFAQ #sidebar.navigation ul.navigationFAQ li {
background-color: #fff;
border-bottom: 1px solid #f3f3f3
}
#contenerFAQ #sidebar.navigation ul.navigationFAQ li.active {
background: transparent;
}
.navigationFAQ h3:before {
background: url(imgs/icons-services/picto_groupe.svg);
content: "";
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
width: 2vw;
height: 2vw;
top: 0px;
position: relative;
opacity: 0.95;
vertical-align: middle;
margin-left: 1.5vw;
}
#contenerFAQ #sidebar .titre {
background: #323232;
height: 4vw;
float: left;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 1vw;
font-family: "lemonadaBold";
line-height: 12vw;
letter-spacing: 0.1em;
color: #ffffff;
text-transform: uppercase;
margin-right: 1vw;
}
.navigationFAQ {
margin-right: 1vw;
}
.navigationFAQ h3 a {
height: 3vw;
line-height: 3vw;
padding-left: 1vw;
font-family: "dosisRegular";
text-transform: uppercase;
color: #333;
text-decoration: none;
font-size: 0.85vw;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar" class="navigation">
<div class="titre">
<h2>Choisir un thème</h2>
</div>
<ul class="navigationFAQ">
<li class="methode-icon">
<h3><a href="#methode-section" class="backgroundLi methodeLink">Méthode naturelle</a></h3>
</li>
<li class="education-icon">
<h3><a href="#education-section" class="backgroundLi educationLink">Education canine</a></h3>
</li>
<li class="pension-icon ">
<h3><a href="#pension-section" class="backgroundLi pensionLink">Pension canine</a></h3>
</li>
<li class="toilettage-icon ">
<h3><a href="#toilettage-section" class="backgroundLi toilettageLink">Toilettage</a></h3>
</li>
</ul>
</div>