为什么在我移动到另一个页面然后按后退按钮后，这个jQuery的工作方式会有所不同呢？
为什么在我移动到另一个页面然后按后退按钮后，这个jQuery的工作方式会有所不同呢？
提问于 2009-01-23 19:13:10
我正在为一个网站制作一个简单的导航菜单。您可以使用id 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>回答 3
Stack Overflow用户
回答已采纳
发布于 2009-01-23 19:23:03
你知道，只要使用CSS和HTML，你就可以完成所有你正在做的事情？
li
- Set
- 将
a设置为display:block，以使其填充a上的:hover状态以更改background.
- ???
- Profit.
Stack Overflow用户
发布于 2009-01-23 19:57:00
下面的工作。我会把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>Stack Overflow用户
发布于 2009-01-23 20:06:22
哦，好吧，我说过我不会给出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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/474095
复制相关文章
相似问题
腾讯云开发者
