我正在为网站制作一个简单的导航菜单.你创建一个ul带id的menu,从那里开始应该很简单.我有一些简单的CSS给所有lis正确的背景图像,然后一些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>
| 归档时间： |
|
| 查看次数： |
336 次 |
| 最近记录： |