您的位置：首页 > Web前端 > JQuery

Jquery:Jquery +css实现的导航

2014-06-25 23:33 239 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>list</title>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="content-type" content="text/html;charset=utf8" />
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<style type="text/css">
.header {
border-bottom: 1px solid #cdcdcd;
margin: 0 auto;
width: 100%;
overflow: hidden;
}

.border_left {
border-left: 1px solid #D4D6D9;
}

ul li {
float: left;
width: 120px;
height: 35px;
display: block;
text-align: center;
background: #f3f3f3;
border-right: 1px solid #D4D6D9;
border-top: 1px solid #D4D6D9;
color: #4D4D4D;
line-height: 35px;
}

ul li a {
color: #3579B3;
text-decoration: none;
}

ul li a:hover {
background: #428BCA;
background-image: -webkit-gradient(linear,left 0,left 100%,from(#428bca),to(#3071a9));
background-image: -webkit-linear-gradient(top,#428bca,0%,#3071a9,100%);
background-image: -moz-linear-gradient(top,#428bca 0,#3071a9 100%);
background-image: linear-gradient(to bottom,#428bca 0,#3071a9 100%);
background-repeat: repeat-x;
border-color: #2d6ca2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca',endColorstr='#ff3071a9',GradientType=0);
width: 120px;
height: 35px;
display: block;
color: #fff;
text-decoration: none;
}

ul li.menu_hover a {
background: #428BCA;
background-image: -webkit-gradient(linear,left 0,left 100%,from(#428bca),to(#3071a9));
background-image: -webkit-linear-gradient(top,#428bca,0%,#3071a9,100%);
background-image: -moz-linear-gradient(top,#428bca 0,#3071a9 100%);
background-image: linear-gradient(to bottom,#428bca 0,#3071a9 100%);
background-repeat: repeat-x;
border-color: #2d6ca2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca',endColorstr='#ff3071a9',GradientType=0);
width: 120px;
height: 35px;
display: block;
color: #fff;
text-decoration: none;
}

</style>
<script type="text/javascript" language="javascript">
var test = function(i){
$("ul li:not("+i+")").removeClass("menu_hover");
$("ul li:eq("+i+")").addClass("menu_hover");
}
</script>
</head>
<body>
<div id="header" class="header">
<ul>
<li class="border_left menu_hover"><a href="javascript:test(0)">演示中心</a></li>
<li><a href="javascript:test(1)">技术白皮书</a></li>
<li><a href="javascript:test(2)">产品视频</a></li>
<li><a href="javascript:test(3)">产品宣传</a></li>
<li><a href="javascript:test(4)">产品相册</a></li>
</ul>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航