jQuery menu

[Verwijderd]

Hallo,

Ik ben op het moment bezig met een menuutje maken in jQuery icm css en html nu had ik enkel een vraag.
Wanneer ik op een pagina ben (zeg index) wil ik graag dat in het menu duidelijk is welke pagina je je momenteel op bevindt in mijn geval door middel van de opacity. wat ik tot nu toe heb is dat de menu items heel mooi van opacity 0.5 naar 1 gaan wanneer ik eroverheen ga. Allemaal hartstikke prima, precies wat ik wil.

Het enige probleem waar ik tegenaan loop is dus dat wanneer ik naar een andere pagina binnen de site wil is dat de opacity van index terug gaat naar 0.5 en die van de pagina waar ik heen ga 1 wordt totdat ik naar de volgende pagina ga.

HTML:

<div class="menu">
    <ul>
        <div class="change">
            <li class ="fade"> <a href="index.html">Home</a></li>
            <li class ="fade"><a href="about.html">About</a></li>
            <li class ="fade"><a href="work.html">Work</a></li>
            <li class ="fade"><a href="contact.html">Contact</a></li>
        </div>
    </ul>
</div>

Cascading Stylesheet:

body {
 background-color: #F2F2F2;
 }
.menu a{
  background-color:  #F2F2F2;   
  color: #000000;
  font-size: 15px;
  font-weight: bold;
  padding: 10px 10px;

  }

.menu  li {
display: inline;
opacity: 0.5;

}

.header {
height: 600px;
width: 1920px;
position: fixed;
right: 0px;
background-image: url("http://i61.tinypic.com/2yo6bk3.png");
background-repeat: no-repeat;
background-size: cover;
}

.header h1 {
position: fixed;
left: 150px;
}

.main {
position: absolute;
top: 625px;
left: 500px;
right: 500px;
}

JavaScript:

$(document).ready(function(){
        $('li.fade').mouseenter(function() {    
            $(this).fadeTo('fast', 1);
            });
                $('li.fade').mouseleave(function() {    
                    $(this).fadeTo('fast', 0.5);
                    });
    
                
});

Ik hoop dat iemand mij kan helpen

[ Voor 1% gewijzigd door RobIII op 16-09-2014 16:55 . Reden: Code tags i.p.v. quote tags ]

[Mike2k]

Hoe weet je Jquery nu welke link hij wel of niet doorzichtig moet maken ? Ze hebben namelijk allemaal dezelfde class...

Ze zult iets met ID moeten gaan doen en dan een selector gebruiken om het juiste element doorzichtig te maken...

Bijv: http://api.jquery.com/attribute-contains-prefix-selector/

Dan maak je iets als fade_1, fade_2, fade_3 etc...vervolgens laat je je jquery splitten op de _ en gebruik je het nummer om de juiste <li> aan te sturen

[ Voor 32% gewijzigd door Mike2k op 15-09-2014 15:40 ]

[vpm]

Verwijderd schreef op maandag 15 september 2014 @ 15:29:
dat in het menu duidelijk is welke pagina je je momenteel op bevindt
[...]
de opacity van index terug gaat naar 0.5 en die van de pagina waar ik heen ga 1 wordt totdat ik naar de volgende pagina ga.

Ik heb moeite met het begrijpen van je vraag. Aan de ene kant lijk je te vragen om een 'active' item, terwijl het laatste lijkt te gaan over actieve navigatie (verandering bij beweging).

Voor dat eerste:
Iets dat je zou kunnen doen is adhv window.location de juiste <li/> op active (of net wat) te zetten. Niet zo moeilijk.
Echter, gezien je enkel met html'etjes werkt: waarom niet gewoon direct in de code kloppen?

[ Voor 6% gewijzigd door vpm op 16-09-2014 16:52 ]

[RobIII]

Als je code post, gebruik dan a.u.b. code tags.