怎样实现这个导航菜单?
功能:点击导航其中一个栏目变色,再点击页面其他地方,导航没有变化
点击导航另一个栏目变色,并且之前的栏目恢复到未点击之前的状态
h5:
<html>
<head>
<link href="navigation.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$(".menu a").focus(function(){
$(this).addClass("cur").siblings().removeClass("cur");
})
})
</script>
</head>
<body>
<div class="menu">
<a href="#">导航一</a>
<a href="#">导航一</a>
<a href="#">导航一</a>
<a href="#">导航一</a>
<a href="#">导航一</a>
<a href="#">导航一</a>
<a href="#">导航一</a>
<a href="#">导航一</a>
<del></del>
</div>
</body>
</html>
css:
.menu a{
display:block;
float:left;
}
.menu
{
font-size:14px;
line-height:14px;
background:url("image/navigation/bg1.jpg") repeat-x left bottom;
background-color:#f7f7f7;
margin-bottom:24px;
font-family:"Arial","Tahoma","微软雅黑","黑体";
line-height:18px;
padding:0px;
margin:0px;
text-align:center;
}
.menu a:link,.menu a:visited
{
color:#383737;
background-color:#f7f7f7;
border-bottom:solid 2px #e6e6e6;
text-decoration:none;
padding:10px 16px 10px 16px;
}
.menu a:hover,.menu a:focus
{
background-color:#646464;
border-bottom:solid 2px #2e2e2e;
color:#fff;
}
.cur
{
background-color:#646464;
border-bottom:solid 2px #2e2e2e;
color:#fff;
}