CSS NAV页面效果总结

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>Untitled Document</title>
<script language="javascript" src="jquery1.8.2.js" ></script>
<script language="javascript" src="FusionCharts.js" ></script>
<script language="javascript" src="jquery.easychart.js" ></script>
<script language="javascript" src="default.js" ></script>
<style>
/**节点导航面板*/
.center .nav{
	border-bottom:2px solid #279CEA;	
	height:30px;
	background:#FFFFFF;
	margin-top:5px;
}
 ul{
	list-style:none;
	margin:0;
	padding:0;
	height:100%;
}

 li{
	float:left;
	margin-right:2px;
	background:#D1D1D1;
	height:100%;
	width:60px;
	text-align:center;
	color:#333333;
	cursor:pointer;
	font:12px '宋体';
	line-height:30px;
}

/**tab节点选中*/
.nav .selected{
	background:#279CEA; color:#FFFFFF
}

/**tab节点未选中*/
.nav .noSelected{
	background:#D1D1D1; color:#333333
}
/**节点导航面板 end*/
</style>
<script type="application/javascript">

	window.onload = function(){
			//节点点击事件
			$(".nav ul > li").each(function(index, element) {
				$(element).bind("click",(index+1),function(obj){
					menuClick(obj.data);
				});
			});

			noDataColumn3D('#chart');
	}
	//绑定事件
	function menuClick(id)
	{
		for(var i = 1;i<=5; i++){
			$(".menu_"+i).addClass("noSelected");
			//内容信息页面id
			//$("#detail_"+i).hide();
		  }
		//如果不移除未选中样式直接添加选择样式会被前者覆盖
		$(".menu_"+id).removeClass("noSelected").addClass("selected");
		//内容信息页面id
		//$("#detail_"+id).show();
		alert("第"+id+"个tab 响应");
	};
</script>
</head>
<body>
	<div class="center">
		<div class="nav">
			<ul>
				<li class="menu_1">Menu_01</li>
				<li class="menu_2">Menu_02</li>
				<li class="menu_3">Menu_03</li>
				<li class="menu_4">Menu_04</li>
				<li class="menu_5">Menu_05</li>
			</ul>
		</div>

		<div id="chart">
			22
		</div>
	</div>
</body>
</html>
注：需导入jquery文件
CSS NAV页面效果总结

猜你喜欢
