Text in DIV veranderen via Links..

Status
Niet open voor verdere reacties.
S

Searche93

Gebruiker
Lid geworden
5 mei 2014
Berichten
13
Hallo,

Ik probeer om een site te maken met boven aan de site een menu,

Bijvoorbeeld:
Home | Design | Contact

Nu wil ik text aan de linkerkant van de site.
Maar (nu komt het moeilijke gedeelte), ik wil dat als men op bijvoorbeeld Design klinkt, de text van de huidige pagina verdwijnt en er nieuwe content tevoorschijn komt zonder dat er een nieuwe pagina geladen moet worden.

Ik heb uren op google gezeten om dit uit te zoeken, maar ik kom niet verder.
Kunnen jullie mij hiermee helpen?
Of hebben jullie handige links met tutorials?

Alvast bedankt. :cool:
 
Code: 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titel</title>
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

<div class="menu">
<ul>
    <li><a href="link">Link</a></li>|
    <li><a href="link">Link</a></li>|
    <li><a href="link">Link</a></li>|
    <li><a href="link">Link</a></li>|
    <li><a href="link">Link</a></li>|
</ul>
</div>
</body>
</html>
 
Dit is redelijk makkelijk met jQuery te doen.

Code: 
<a href="#" id="open_div_1">Open div 1</a>
<a href="#" id="open_div_2">Open div 1</a>
<a href="#" id="open_div_3">Open div 1</a>


<div id="div1">Hier komt informatie in</div>
<div id="div2" style="display:none;">Hier komt informatie in</div>
<div id="div3" style="display:none;">Hier komt informatie in</div>

// jQuery, hier heb je wel een library voor nodig.
$('#open_div_1').on('click',function(){
    $('#div1').css('display','block');
    $('#div2').css('display','none');
    $('#div3').css('display','none');
});

en dit ook bij 2 & 3

Succes!
 
Quintoo,

Wat bedoel je met " hier heb je wel een library voor nodig."?
Ik ben niet echt een jQuery expert haha
 
Sorry! Was even lui om de link op te zoeken haha :)

Deze link moet je plaatsen in je header, dan werkt mijn stukje code als het goed is ;)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan