Блог

Я внедрил меню Lavalamp на своем веб-сайте, и я хотел сделать это: когда пользователи нажимают на какую-либо ссылку в меню, курсор остается на этой ссылке.

Эффект лавалампы работает.

jquerycode, который у меня есть, это:

 <script type="text/javascript">
    $(function() {
        $("#menutop").lavaLamp({
            fx: "backout",
            speed: 700,
           click: function(event, menuItem) {
                 return true;
               }
        });
    });
</script>
  

HTML-код для меню выглядит следующим образом:

 <ul class="menu-top" id="menutop">
                <li class="current"><a href="index.php">Início</a></li>
                <li><a href="servidores.php">Servidores</a></li>
                <li><a href="pagamentos.php">Pagamentos</a></li>
                <li><a href="forum/">Fórum</a></li>
                <li><a href="sobre.php">Sobre</a></li>
</ul>
  

Я думаю, что решение заключается в том, чтобы что-то сделать с jquery, который присваивает классу current значение li с помощью href страницы, которую мы просматриваем.

Я не знаю, как это сделать, но если вы поняли и знаете, дайте мне знать xD

Спасибо

ps: конечно, на моем веб-сайте есть и другие страницы, но если нет li с href страницы, с которой начинается просмотр, текущий класс всегда будет указан в li страницы index.php

@Afonso, это может быть поздно, но лучше поздно, чем никогда. Это может помочь кому-то еще, кто заходит на эту страницу.

Итак, вы хотите, чтобы наведенный курсор оставался под элементом li страницы, на которой вы в данный момент находитесь, верно? Для этого мы изменим плагин, чтобы он принимал начальную позицию в качестве переменной. Сделайте это следующим образом —

1. Установите для параметров переменную start_position со значением по умолчанию 0.

    o = $.extend({ fx: "linear", speed: 500, start_position: 0, click: function(){} }, o || {});
     

2. Измените плагин, чтобы установить элемент curr, как показано на рисунке

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

3. Теперь в javascript страницы, на которой вы находитесь, вы можете сделать:

    $("#navlinks").lavaLamp({
       fx: "backout",//optional
       speed: 700,
       start_position: 1,//When page is loaded hover will be under Servidores
       click: function(event, menuItem) {
           return true;//so that you navigate to the appropriate link under 'li'
       }
   });
     

Я использовал плагин версии 0.1.0, чтобы протестировать это. И я не делал ручную настройку класса ‘current’.

Итак, теперь вы можете вручную указать, над каким элементом вы хотите, чтобы курсор был наведен, независимо от того, ссылается ли он на просматриваемую страницу или нет.

я пишу на php, и меня немного раздражало постоянно переопределять start_position, поэтому я использовал php в своем заголовке, чтобы узнать, на какой странице я нахожусь, и соответствующим образом установить текущий класс :

// Я получаю название моей текущей страницы

 <?php 
    $page = $_SERVER['SCRIPT_NAME'];
    $page = substr($page, 1);
?>
  

// я сравниваю текущую страницу с пунктами моего меню

 <ul class="arrowslide" id="1">
<li <?php if($page=="index.php")echo("class='current'");?>><a href="index.php">accueil</a></li>
<li <?php if($page=="club.php")echo("class='current'");?>><a href="club.php">le club</a></li>
<li <?php if($page=="equipe.php")echo("class='current'");?>><a href="equipe.php">l'equipe</a></li>
<li <?php if($page=="avion.php")echo("class='current'");?>><a href="avion.php">l'avion</a></li>
</ul>
  

Будьте внимательны при сравнении ваших страниц, если вы находитесь в подкаталоге со своего сервера, вам нужно будет вычесть другой уровень или удалить весь адрес целиком.
так что либо

 $page = substr($page,2);
  

или

 if($page=="directory/page.php")..
  

надеюсь, это поможет тем, у кого есть pb в будущем!