为什么在我移动到另一个页面然后点击后退按钮后，jQuery的工作方式会有所不同？_Jquery_Html

为什么在我移动到另一个页面然后点击后退按钮后，jQuery的工作方式会有所不同？

jquery html

为什么在我移动到另一个页面然后点击后退按钮后，jQuery的工作方式会有所不同？,jquery,html,Jquery,Html,我正在为一个网站制作一个简单的导航菜单。您使用id菜单创建了一个ul，并且从那里开始应该非常简单。我有一些简单的css来给所有的lis提供正确的背景图像，然后有一些jQuery来改变li在用户鼠标移动时的外观。它工作得很好，但有一个问题。当用户直接单击链接，而不是单击链接周围的框，然后使用浏览器的后退按钮时，就会出现问题。当用户将鼠标悬停在上面时，整个li将完全空白，但一旦用户将鼠标移开，就可以了。有人知道是什么导致了这种奇怪的行为吗？（注意，每隔一段时间，鼠标滑过会导致li闪烁，特别是当它是底

我正在为一个网站制作一个简单的导航菜单。您使用id

菜单创建了一个ul
，并且从那里开始应该非常简单。我有一些简单的css来给所有的li
s提供正确的背景图像，然后有一些jQuery来改变li
在用户鼠标移动时的外观。它工作得很好，但有一个问题。当用户直接单击链接，而不是单击链接周围的框，然后使用浏览器的后退按钮时，就会出现问题。当用户将鼠标悬停在上面时，整个li将完全空白，但一旦用户将鼠标移开，就可以了。有人知道是什么导致了这种奇怪的行为吗？（注意，每隔一段时间，鼠标滑过会导致li
闪烁，特别是当它是底部两个li
s之一时。我认为这是正常的，但可能有助于诊断问题。）

菜单测试
ul#菜单{宽度：185px；边距：自动；文本对齐：居中；颜色：fff；列表样式类型：无；}
ul，li，h2{padding:5px0；margin:0；}
LIH2{高度：49px；背景：url（'top.png'）；垂直对齐：中间；}
li.link{height:30px；background:url（'link.png'）；}
li.link a{颜色：白色；文本装饰：无；}
li.bottom{height:25px；background:url（'bottom.png'）；}
$（文档）.ready（函数（）{
$（“.link”）.mouseover（函数（）{//在mouseover上突出显示
$（this）.css（{background:'url（'file:///Users/J/Desktop/DHTML/Menu/linkselect.png')"});
})
$（“.link”）.mouseout（函数（）{//un高亮显示mouseout
$（this.css（{background:'url（'./link.png'）”}）；
})
$（“.link”）。单击（function（）{//在单击时转到站点，即使单击不在链接上
window.location=$（this.find（“a”）.attr（“href”）；
})
})

菜单









我知道这并不能完全回答您的问题，但是在悬停时更改元素的CSS属性完全可以在CSS中完成。例如，您的CSS类似于：
.link {
  background: url('./link.png');
}
.link:hover {
  background: url('file:///Users/J/Desktop/DHTML/Menu/linkselect.png');
}

我认为您也可以将
标记环绕在
标记周围，这样整个列表项就是链接（不需要$（“.link”）。单击（…）
代码）
面向对象，不能将
包装在
周围，但正如奥利提到的，您可以在CSS中执行此操作：
.link a {
  display: block;
}

你知道你可以用CSS和HTML做任何事情吗

将a
设置为display:block
以填充li
设置：将
状态悬停在屏幕上以更改背景

利润
以下工作。我将把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>


默认Web项目-www.SampsonResume.com
.ul{列表样式：无；边距：0；填充：0；边框：1px实心#cccc；}
li.link{背景色：000000；填充：10px；}
li a{color:#ffffff；文本装饰：无；}
li.on{背景色：#f1f1；光标：指针；}
关于{color:#000000；}
$（文档）.ready（函数（）{
$（“li.link”）。每个（函数（）{
$（此）。悬停(
函数（）{$（this）.addClass（“on”）；}，
函数（）{$（this）.removeClass（“on”）；}
);
$（此）。单击（函数（）{
window.location=$（this.find（“a”）.attr（“href”）；
});          
});
});





哦，好吧，我说过我不会给出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>


默认Web项目-www.SampsonResume.com
ul{列表样式：无；边距：0；填充：0；边框：1px实心#cccc；}
li{margin:0；padding:0；}
LIA{显示：块；背景色：#FFF；颜色：#000；文本装饰：无；}
李a：悬停{color:#FFF；背景色：#000；}





您可能还需要在link（a，而不是.link）元素上设置高度和行高。我不确定：hover是否可以在IE6等较旧的浏览器中工作，而javascript方法可以。这是我过去处理IE6的经验。我无意显得粗鲁，但这并没有回答他的问题。提供另一种解决方案不是我们的要求。实际上，我很好奇为什么点击后退按钮后行为会有所不同。从我所读到的IE6中，hover在锚上受支持，但不像li、tr等。。我必须支持IE6，并且必须为此编写javascript解决方案。你可能是对的，它只适用于锚。。。一、 同样，我们也不幸被迫支持IE6，我们一直都在使用它，但可能只在锚上使用。我刚刚尝试了这个，它对我来说效果不错。。。您使用的浏览器/操作系统是什么？还有什么JQuery版本？另外，如果你想让某个东西表现得像一个链接，你应该给它鼠标右键：.link{cursor:pointer；}@Kip，然后用javascript设置鼠标指针，否则没有javascript的人仍然会看到指针，认为整个链接是一个li:$（'.link'）.css（'cursor'，'pointer'）；“每个”都是完全没有必要的，不是吗？这就是链接的作用：$（'li.link'）。悬停（…）。单击（…）；我认为这段代码可以解决他的问题。他需要使用“hover”方法或使用mouseenter/mouseleave事件代替mouseover/mouseout+从我这里得到1分！普雷斯塔尔，我把.each（）当作一种习惯，因为我通常做得更多
<!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>