Aggiungere/rimuovere classe a più elementi in seguito a onclick

[mahamatt]

Ciao a tutti,
avrei una necessità particolare, ma le mie conoscenze in campo js sono molto limitate.

Ho una struttura html di questo tipo:

<ul id="lista"
   <li class="mele">Mele</li>  
   <li class="pere">Pere</li>  
   <li class="ananas">Ananas</li>
</ul>

<section class="mele">Mele: testo...</section>
<section class="pere">Pere: testo...</section>
<section class="ananas">Ananas: testo...</section> 

Avrei bisogno che, cliccando su uno dei <li> all'interno di <ul id="lista">, sia quel <li>, sia la section con la medesima classe prendessero entrambi classe "active" (in aggiunta alle classi esistenti).
La classe active dovrebbe essere rimossa da entrambi i tag nel momenti in cui si facesse clic su un altro dei <li> contenuti in <ul id="lista">.

Quindi, ad esempio: cliccando sulla voce di elenco "Mele", il <li> dovrebbe diventare <li class="mele active"> e la section dovrebbe diventare <section class="mele active">, fino al successivo evento onclick su un'altra voce elenco.

Al momento sono riuscito solo ad effettuare il cambio di classe "active" sui singoli <li> ma non sulle section.

Qui il jsfiddle della demo:
http://jsfiddle.net/mahamatt/t3y7Lh1u/5/

Grazie in anticipo a quanti mi aiuteranno

[KillerWorm]

Ciao, potrebbe essere una cosa del genere:

document.querySelectorAll('#lista>li').forEach(function(btn){
  btn.addEventListener("click", function() {
    document.querySelectorAll('.active').forEach(function(e){
      e.classList.remove('active');
    });
    [this, document.querySelector('section.'+this.className)].forEach(function(e){
      e && e.classList.add('active');
    });
  });
});

Qui il fiddle aggiornato http://jsfiddle.net/wck5z0qt/1/

Vedi se può andare bene

[mahamatt]

Funziona! È proprio ciò di cui avevo bisogno.
L'impostazione è differente, ma mi sembra anche più lineare.
Grazie mille, gentilissimo!!!