Jquery:Jquery +css实现的导航_border:1px solid #d4d6d9;-CSDN博客

本文链接：https://blog.csdn.net/meegle/article/details/34562197

<!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>