Activated en disactivated jquery

Status
Niet open voor verdere reacties.

gast0198

Gebruiker
Lid geworden
15 nov 2016
Berichten
83
Ik zou 2 "class"en willen aanmaken : disactivated en activated. Initieel, bij het inlezen van de pagina, heeft het eerste menu onderdeel de class activated, en al de rest de class disactivated.
Indien een menu onderdeel aangeklikt wordt deze activated en al de andere disactivated.

Bijvoorbeeld als ik op menu 1 klik zie ik enkel de tekst van katten, de rest mag niet zichtbaar zijn. klik ik op menu 3 dan zie de tekst vissen, andere zijn dan niet zichtbaar.

Maar ik weet niet hoe de functie verder in elkaar zit? Zou iemand deze verder kunnen aanvullen? Als er iets niet duidelijk is mag je altijd reageren.


<div id="container">
<div id="titel">
<h1>Huisdieren!</h1>
</div>

<div id="menu">
<ul id="unordereList">
<li><a href="#Menu 1">Menu 1</a></li>
<li><a href="#Menu 2">Menu 2</a></li>
<li><a href="#Menu 3">Menu 3</a></li>
</ul>
</div>
<div id="inhoud">
<div id="inhoud 1">
<h2>Inhoud 1</h2>
<p>
Tekst Katten

</p>
</div>
<div id="inhoud 2">
<h2></h2>
<p>
Tekst honden
</p>
</div>
<div id="inhoud 3">
<h2>Vissen</h2>
<p>
tekst vissen

</p>
</div>


</div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#menu ul a").click(
function() {
$("#div idinhoud").removeClass().addClass('disactivated');

$("#div idinhoud").removeClass().addClass('activated');
})

});
});

</script
 
Laatst bewerkt:
Alleen syntax foutjes heb ik eruit gehaald. De JS is niet compleet werkend maar met onderstaande kan je verder. Momenteel met website bezig dus weinig tijd.
Code:
<div id="container">
   <div id="titel">
      <h1>Huisdieren!</h1>
   </div>
   <div id="menu">
      <ul id="menulijst">
         <li><a class="activated" href="#menu1">Menu 1</a></li>
         <li><a class="disactivated" href="#menu2">Menu 2</a></li>
         <li><a class="disactivated" href="#menu3">Menu 3</a></li>
      </ul>
   </div>
   <div id="inhoud">
      <div id="inhoud1">
         <h2>Katten</h2>
         <p>Tekst Katten</p>
      </div>
      <div id="inhoud2">
         <h2>Honden</h2>
         <p>Tekst honden</p>
      </div>
      <div id="inhoud3">
         <h2>Vissen</h2>
         <p>tekst vissen</p>
      </div>
   </div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $("#menu ul a").click(function(){
      $("#menu ul a").removeClass('activated').addClass('disactivated');
      $(this).removeClass('disactivated').addClass('activated');
   });
});
</script>
Let erop dat bij elke ( een ) hoort en bij elke { een } en bij elke < een >
En verder mag een id naam slechts 1 keer voorkomen op een pagina en geen leestekens of spaties bevatten, behalve - en _

Suc6. Have fun.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan