vraag over menu

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Robert Jansen

Robert Jansen

10/05/2012 16:20:18
Quote Anchor link
hallo,

ik heb de volgende vraag: ik heb een menu in html:
<ul>
<li ><a href="home.html" target="rechts">home</a></li>
<li class="active"><a href="producten.html" target="rechts">Producten </a></li>
<li><a href="referenties.html" target="rechts">Referenties </a></li>
<li><a href="contact.html" target="rechts">Contact </a></li>

</ul>

het is de bedoeling dat als de gebruiker op de home.html pagina kijkt dat er het woord home een rode achtergrond krijgt. en als de gebruiker producten.html aanklikt dat dan de rode achtergrond van home.html verdwijnt en verplaatst wordt naar producten.html. Dus eigenlijk als de gebruiker op een huidige pagina kijkt dat er in het menu bij het desbetreffende woord een rode achtergrond te zien is.

mijn vraag is hoe doe ik dit in css?

alvast bedankt.
 
PHP hulp

PHP hulp

25/12/2024 21:25:36
 
Wouter J

Wouter J

10/05/2012 16:33:20
Quote Anchor link
Je moet dan met JavaScript of PHP de li element een bepaalde class meegeven (bijv. .active) die kun je dan stijlen met CSS.
 
Robert Jansen

Robert Jansen

10/05/2012 16:38:55
Quote Anchor link
bedoel je dan met jQuery: click event met addClass. En dan met de addClass voeg je een achtergrondkleur toe?
 
Wouter J

Wouter J

10/05/2012 16:47:25
Quote Anchor link
Nee. Ik bedoel dat je in JavaScript de url pakt en die vergelijkt met de url in de nav items en dan de gene die overeenkomt een class meegeeft. Zoiets:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
(function(window, undefined) {
    var document = window.document,
        location = window.location.pathname || document.location.pathname;
        navItems = document.getElementById('nav').getElementsByTagName('li');

    for (i=-1; item = navItems[++i]; ) {
        if (item.children[0].href == location) {
            item.classList.add('active');
        }
    }
})(window);
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.