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>



[color=red][b]注:需导入jquery文件[/b][/color]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值