All geek questions in one place

Why does this jQuery work differently after I go to another page, then click the back button?

I am creating a simple navigation menu for the site. You create ulwith id menu, and from there should be pretty simple. I have simple CSS to give all the licorrect background image, and then some jQuery to change the look liwhen the user translates with the mouse. It works very well, but there is one problem. When a user clicks on a link directly, and does not click in the box around it, and then uses the back button in the browser, everything goes wrong. When the user wraps around this time, all the lithium goes completely empty, but it is beautiful as soon as the user leaves. Does anyone know what might cause this strange behavior? (Note that mousing over causes flickering from time to time li, especially if it is one of the two bottomlis. I thought this was normal, but maybe this can help diagnose the problem.)

<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>
+3
source share
4 answers

Do you know that you can do everything you do with CSS and HTML only?

  • Set ain display:blockso that it fillsli
  • Set the parameter :hoverto a to change the background.
  • ???
  • Profit
+6
source

The following work. I will leave the CSS details for you. Please also note, as others have pointed out, you can do this with pure CSS and get the same result. But since this is not what you asked for, I will respect your request and give 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>
+2
source

, , CSS- CSS. CSS :

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

, <a> <li>, ( $(".link").click(...)).

Oops, can't wrap it <a>around <li>, but as Oli said, you can do it in CSS:

.link a {
  display: block;
}
+1
source

Ok, I said I won’t offer a CSS solution, but here it’s all the same:

<!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>
0
source

Source: https://habr.com/ru/post/1702153/

More articles:


All Articles