Problème avec jquery lavalamp

Question

Pour une raison quelconque, ma couleur de fond revient sur le lien le plus à gauche, quel que soit le lien sur lequel je clique. Quelqu'un sait comment l'obtenir pour rester sur le lien cliqué?

css

#lamp { 
float:left; 
margin:25px 0px 0px 90px; 
clear: both; 
} 

.lavaLamp { 
position: relative; 
height: 29px; width: 400px; 
background: #000000 no-repeat top; 
background-image:url('http://wildfire-restaurant.com/images/lampback.png'); 
padding: 15px; margin: 10px 0; 
overflow: hidden; 
float:left; 
} 
    /* Force the list to flow horizontally */ 
    .lavaLamp li { 
     float: left; 
     list-style: none; 
    } 
     /* Represents the background of the highlighted menu-item. */ 
     .lavaLamp li.back { 
      background: no-repeat right -30px; 
      width: 9px; height: 30px; 
      z-index: 8; 
      position: absolute; 
     } 
      .lavaLamp li.back .left { 
       background: #BD5108 no-repeat top left; 
       height: 30px; 
       margin-right: 9px; 
      } 
     /* Styles for each menu-item. */ 
     .lavaLamp li a { 
      position: relative; overflow: hidden; 
      text-decoration: none; 
      text-transform: uppercase; 
      font: bold 14px arial; 
      color: #fff; outline: none; 
      text-align: center; 
      height: 30px; top: 7px; 
      z-index: 10; letter-spacing: 0; 
      float: left; display: block; 
      margin: auto 10px; 
     } 

jquery

<script type="text/javascript"> 
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })}); 
</script> 

Site http://wildfire-restaurant.com/

Answer 1

si vous utilisez l'extension this ....

essayez de définir 'AutoReturn' true. Dans le cas contraire, il existe probablement une option permettant de définir le lien vers lequel l'arrière-plan revient. Dans ce cas, vous devrez le définir surClic().

Essayez de lire la documentation.

De plus, poster plus d'informations sur l'extension que vous utilisez serait bénéfique. Ce n'est pas un problème CSS.

Answer 2

Vous devez ajouter la classe current à l'actuelle li sur les sous-pages. Le plugin lavalamp exécute ce morceau de code:

curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0]; 

qui sélectionne les li avec une classe de current ou le premier élément. Vous pouvez ajouter cette classe sur le serveur avant de l'envoyer au client, pas besoin de le faire en javascript.

Mise à jour

C'est ce que le HTML ressemblerait pour la navigation, lorsque votre navigateur est à la page '/ menu /'. Remarquez comment le li avec le lien vers Menu a le class="current":

<ul class="lavaLamp"> 
    <li><a href="http://wildfire-restaurant.com/">Home</a></li> 
    <li class="current"><a href="http://wildfire-restaurant.com/menu/">Menu</a></li> 
    <li><a href="http://wildfire-restaurant.com/events/">Events</a></li> 
    <li><a href="http://wildfire-restaurant.com/friends/">Friends</a></li> 
    <li><a href="http://wildfire-restaurant.com/contact/">Contact</a></li> 
    <li><div class="left"></div></li> 
</ul> 

Sur les EVENTS page, le li avec le lien vers Events aurait la classe:

<li class="current"><a href="http://wildfire-restaurant.com/events/">Events</a></li> 

etc.