Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

Actieve staat van de link moet zichtbaar blijven (Opgelost)

hollandvorm - 07/08/2011 17:24
Lid		Beste mensen, Ik heb een html pagina met een div #submenu met daarin links die als je erop klikt (onclick) een laag met tekst en een laag met foto tonen of verbergen. Zie werkend voorbeeld op http://www.avve...arcel.html Daar hoort onderstaande code bij. <div id="submenu"> <h1> </h1> <ul> <li><a href="#" onclick="MM_showHideLayers('margot','','show','marcel','','hide','foto-margot','','show','foto-marcel','','hide')" >Margot Nollet </a></li> <li><a href="#" onclick="MM_showHideLayers('margot','','hide','marcel','','show','foto-margot','','hide','foto-marcel','','show')" >Marcel Hondeveld </a></li> </ul> </div> Graag wil ik als je op de link klikt dat dan de actieve staat van de link zichtbaar blijft zodat je kunt zien waar je bent. De link zelf is blauw, de hover is zwart en dus de actieve staat moet zwart blijven tot dat je op de andere link klikt en deze dan verandert en de andere weer blauw wordt. Alvast hartelijk dank

2 antwoorden

Gesponsorde links

vinTage - 07/08/2011 18:37 (laatste wijziging 07/08/2011 18:38)

Nieuw lid

Als je je a tags een id meegeeft, dan kun je een functie maken, of inline javascript een css toekennen/verwijderen adhv het id.

Een simpel 'hardcoded' voorbeeldje:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<style>
a.black{
  color:#000;
}

a{
  color:#00f;
}
</style>

<a id="link1" href="#" onclick="actief(this.id)">Margot Nollet</a>
<br />
<a id="link2" href="#" onclick="actief(this.id)">Marcel Hondeveld</a>
<br />
<a id="link3" href="#" onclick="actief(this.id)">Anders</a>

<script>
document.getElementById('link1').className = "black"; //de 'eerste' link actief zetten

function actief(id)
{
	document.getElementById('link1').className = "";//resetten
	document.getElementById('link2').className = "";//resetten
	document.getElementById(id).className = "black"; //kleur geven
}
</script>

<style>
a.black{
  color:#000;
}
 
a{
  color:#00f;
}
</style>
 
<a id="link1" href="#" onclick="actief(this.id)">Margot Nollet</a>
<br />
<a id="link2" href="#" onclick="actief(this.id)">Marcel Hondeveld</a>
<br />
<a id="link3" href="#" onclick="actief(this.id)">Anders</a>
 
<script>
document.getElementById('link1').className = "black"; //de 'eerste' link actief zetten
 
function actief(id)
{
	document.getElementById('link1').className = "";//resetten
	document.getElementById('link2').className = "";//resetten
	document.getElementById(id).className = "black"; //kleur geven
}
</script>

hollandvorm - 10/08/2011 12:58
Lid		Bedankt voor je reactie, Het probleem is opgelost. Groet en bedankt

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten