CSS NAV页面效果总结

艾伦蓝

浏览: 595560 次
性别:
来自: 厦门

最近访客更多访客>>

stephen830

njdccy

lzy8828

WangJiaX

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

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

分享到：

js 通过调用方法终止js代码继续执行的问题 ... | oracle SGA总结信息

2016-07-11 09:17
浏览 614
评论(0)
分类:编程语言
查看更多

发表评论

文章已被作者锁定，不允许评论。

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS NAV页面效果总结

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS NAV页面效果总结

评论

发表评论

相关推荐

html pre标签使用（保留空格和回车等操作）

js 鼠标移过去渐变的效果（页面固定 定位栏）

js 在页面中跳转到指定位置

CSS 块对象（独占一行）和内联对象

CSS 点击div的同时显示或隐藏的div

CSS td里面两个input不换行设置（white-space: nowrap）

CSS 页面置灰等待效果

CSS link和@import的区别

Css 表单

CSS 工作总结（nobr标签可以防止换行）

CSS 可上下伸缩的PANEL

CSS常用样式总结积累

最近访客更多访客>>

js 鼠标移过去渐变的效果（页面固定定位栏）