<!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>
[color=red][b]注：需导入jquery文件[/b][/color]
2443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
