Добавить класс к родителю

Question

Я хочу добавить текущий класс элемента в родительский div в Jquery.

Это мой код:

#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. Если мы нажимаем на ссылку пенсиона, мы добавляем класс "pensionLink" в #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>