Почему этот jQuery работает по-другому после того, как я перехожу на другую страницу и нажимаю кнопку «Назад»? - PullRequest
Новая
       19

Почему этот jQuery работает по-другому после того, как я перехожу на другую страницу и нажимаю кнопку «Назад»?

3 голосов
/ 23 января 2009

Я делаю простое навигационное меню для сайта. Вы создаете ul с идентификатором menu, и оттуда все должно быть довольно просто. У меня есть несколько простых CSS, чтобы дать всем li правильное фоновое изображение, а затем некоторые jQuery, чтобы изменить внешний вид li, когда пользователь наводит мышью. Это работает довольно хорошо, но есть одна проблема. Когда пользователь щелкает ссылку напрямую , а не щелкает в рамке вокруг нее, а затем использует кнопку «Назад» браузера, все идет не так. Когда пользователь наводит указатель мыши на в этот раз, весь li становится абсолютно пустым, но это нормально, когда пользователь размышляет. Кто-нибудь знает, что может вызвать это странное поведение? (Обратите внимание, что время от времени при наведении курсора мыши мерцает li, особенно если это один из двух нижних li с. Я думал, что это нормально, но, возможно, это может помочь в диагностике проблемы.) 

<html>
<head>
<title>Menu Test</title>
<style type="text/css">
ul#menu{width: 185px; margin: auto; text-align: center; color: #fff; list-style-type: none;}

ul,li,h2{padding: 5px 0 0 0; margin: 0;}

li h2{height: 49px; background: url('top.png'); vertical-align: middle;}
li.link{height: 30px; background: url('link.png');}
li.link a{color: white; text-decoration: none;}
li.bottom{height: 25px; background: url('bottom.png');}
</style>

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $(".link").mouseover(function(){ //highlight on mouseover
   $(this).css({background: "url('file:///Users/J/Desktop/DHTML/Menu/linkselect.png')"});
  })
  $(".link").mouseout(function(){ //un-highlight on mouseout
   $(this).css({background: "url('./link.png')"});
  })
  $(".link").click(function(){ //go to site on click, even if click isn't on link
   window.location = $(this).find("a").attr("href");
  })
 })
</script>
</head>
<body>

<ul id="menu">
 <li><h2>Menu</h2></li>
 <li class="link"><a href="http://google.com/">Google</a></li>
 <li class="link"><a href="http://norwegianrecycling.multiply.com/">Norwegian Recycling</a></li>
 <li class="link"><a href="http://www.jquery.com/">jQuery</a></li>
 <li class="link"><a href="http://www.apple.com/">Apple</a></li>
 <li class="link"><a href="http://www.ubuntu.com">Ubuntu</a></li>
 <li class="link"><a href="http://www.firefox.com/">Firefox</a></li>
 <li class="link"><a href="http://www.youtube.com/">YouTube</a></li>
 <li class="bottom"></li>
</ul>

</body>
</html>

Ответы [ 4 ]

6 голосов
/ 23 января 2009

Вы знаете, что вы можете делать все, что делаете, с просто CSS и HTML?

  • Установите a на display:block, чтобы он заполнил li
  • Установите состояние :hover на a, чтобы изменить фон.
  • ???
  • Прибыль.
2 голосов
/ 23 января 2009

Следующие работы. Я оставлю детали CSS для вас. Обратите внимание, что, как уже отмечали другие, вы МОЖЕТЕ сделать это с помощью чистого CSS и получить тот же результат. Но поскольку это не то, о чем вы просили, я выполню ваш запрос и предоставлю jQuery. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Default Web Project - www.SampsonResume.com</title>
    <style type="text/css">
      .ul {list-style:none;margin:0;padding:0;border:1px solid #CCCCCC;}
      li.link {background-color:#000000;padding:10px;}
        li a {color:#ffffff;text-decoration:none;}
      li.on {background-color:#f1f1f1;cursor:pointer;}
        li.on a {color:#000000;}
    </style>
    <script src='scripts/jquery/jquery-1.3.min.js' type='text/javascript'></script>
      <script type="text/javascript">
        $(document).ready(function(){
          $("li.link").each(function(){
            $(this).hover(
              function(){$(this).addClass("on");},
              function(){$(this).removeClass("on");}
            );
           $(this).click(function(){
             window.location = $(this).find("a").attr("href");
           });          
         });
       });
     </script>
  </head>
  <body>
    <ul>
      <li class="link"><a href="http://www.google.com">Google</a></li>
      <li class="link"><a href="http://www.yahoo.com">Yahoo</a></li>
      <li class="link"><a href="http://www.SampsonVideos.com">SampsonVideos</a></li>
    </ul>
  </body>
</html>
1 голос
/ 23 января 2009

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

.link {
  background: url('./link.png');
}
.link:hover {
  background: url('file:///Users/J/Desktop/DHTML/Menu/linkselect.png');
}

Я думаю вы также можете обернуть тег <a> вокруг тега <li>, чтобы весь элемент списка был ссылкой (исключая необходимость в коде $(".link").click(...)) .

Упс, не могу обернуть <a> вокруг <li>, но, как упоминал Оли, вы можете сделать это в CSS: 

.link a {
  display: block;
}
0 голосов
/ 23 января 2009

Ну, я же сказал, что не дам CSS-решения, но вот оно: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Default Web Project - www.SampsonResume.com</title>
    <style type="text/css">
      ul {list-style:none;margin:0;padding:0;border:1px solid #CCCCCC;}
      li {margin:0;padding:0;}
        li a {display:block;background-color:#FFF;color:#000;text-decoration:none;}
      li a:hover {color:#FFF;background-color:#000;}
    </style>
  </head>
  <body>

    <ul>
      <li><a href="http://www.google.com">Google</a></li>
      <li><a href="http://www.yahoo.com">Yahoo</a></li>
      <li><a href="http://www.SampsonVideos.com">SampsonVideos</a></li>
    </ul>

  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...