<!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=utf-8" />
<title>竖直导航菜单</title>
<link href="css/nav.css" rel="stylesheet" type="text/css"/>
</head>
<script type="text/javascript">
window.onload = function() {
for( i=1; i<9; i++ ){
var nodeItem = document.getElementById("item"+i); //遍历每个菜单项增加onClick事件
nodeItem.onclick = function() {
/*菜单激活动态样式*/
for( n=0; n<9; n++){
document.getElementsByTagName("li")[n].className = "";
//alert(this.className);
}
this.className = "active";
var linkNode = parseInt( this.id.substring(4,5) );
for ( j=1; j<10; j++){ //按顺序匹配菜单项和菜单内容
var nodeSubItem = document.getElementById("sub-item"+j);
if ( linkNode == j ){ //如果菜单项和菜单内容匹配则显示,否则隐藏
nodeSubItem.style.display = "block";
}else{
nodeSubItem.style.display = "none";
}
}
}
}
}
</script>
<body><div id="menu">
<div id="top">
<ul id="item">
<li id="item1" class="active"><a href="#"><span>首页</span></a></li>
<li id="item2" class="a"><a href="#"><span>宝推广</span></a></li>
<li id="item3"><a href="#"><span>我要收款</span></a></li>
<li id="item4"><a href="#"><span>我要付款</span></a></li>
<li id="item5"><a href="#"><span>我的宝</span></a></li>
<li id="item6"><a href="#"><span>交易管理</span></a></li>
<li id="item7"><a href="#"><span>商户服务</span></a></li>
<li id="item8" class="no"><a href="#"><span>帮助中心</span></a></li>
<li class="ext1"></li>
</ul>
</div>
<div id="bot">
<ul class="sub-item" id="sub-item1">
<li class="ext2"></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
</ul>
<ul class="sub-item" id="sub-item2">
<li class="ext2"></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
</ul>
<ul class="sub-item" id="sub-item3">
<li class="ext2"></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
</ul>
</div>
</div></body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>竖直导航菜单</title>
<link href="css/nav.css" rel="stylesheet" type="text/css"/>
</head>
<script type="text/javascript">
window.onload = function() {
for( i=1; i<9; i++ ){
var nodeItem = document.getElementById("item"+i); //遍历每个菜单项增加onClick事件
nodeItem.onclick = function() {
/*菜单激活动态样式*/
for( n=0; n<9; n++){
document.getElementsByTagName("li")[n].className = "";
//alert(this.className);
}
this.className = "active";
var linkNode = parseInt( this.id.substring(4,5) );
for ( j=1; j<10; j++){ //按顺序匹配菜单项和菜单内容
var nodeSubItem = document.getElementById("sub-item"+j);
if ( linkNode == j ){ //如果菜单项和菜单内容匹配则显示,否则隐藏
nodeSubItem.style.display = "block";
}else{
nodeSubItem.style.display = "none";
}
}
}
}
}
</script>
<body><div id="menu">
<div id="top">
<ul id="item">
<li id="item1" class="active"><a href="#"><span>首页</span></a></li>
<li id="item2" class="a"><a href="#"><span>宝推广</span></a></li>
<li id="item3"><a href="#"><span>我要收款</span></a></li>
<li id="item4"><a href="#"><span>我要付款</span></a></li>
<li id="item5"><a href="#"><span>我的宝</span></a></li>
<li id="item6"><a href="#"><span>交易管理</span></a></li>
<li id="item7"><a href="#"><span>商户服务</span></a></li>
<li id="item8" class="no"><a href="#"><span>帮助中心</span></a></li>
<li class="ext1"></li>
</ul>
</div>
<div id="bot">
<ul class="sub-item" id="sub-item1">
<li class="ext2"></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
</ul>
<ul class="sub-item" id="sub-item2">
<li class="ext2"></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
</ul>
<ul class="sub-item" id="sub-item3">
<li class="ext2"></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
</ul>
</div>
</div></body>
</html>
<!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=gb2312" />
<title>竖直导航菜单</title>
<link href="css/nav.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
.sub-item{display:none}
</style>
</head>
<script type="text/javascript">
window.onload = function() {
for( i=1; i<9; i++ ){
var nodeItem = document.getElementById("item"+i); //遍历每个菜单项增加onClick事件
nodeItem.onclick = function() {
/*菜单激活动态样式*/
for( n=0; n<9; n++){
document.getElementsByTagName("li")[n].className = "";
//alert(this.className);
}
this.className = "active";
var linkNode = parseInt( this.id.substring(4,5) );
for ( j=1; j<10; j++){ //按顺序匹配菜单项和菜单内容
var nodeSubItem = document.getElementById("sub-item"+j);
if ( linkNode == j ){ //如果菜单项和菜单内容匹配则显示,否则隐藏
nodeSubItem.style.display = "block";
}else{
nodeSubItem.style.display = "none";
}
}
}
}
}
</script>
<body><div id="menu">
<div id="top">
<ul id="item">
<li id="item1" class="active"><a href="#"><span>首页</span></a></li>
<li id="item2" class="a"><a href="#"><span>宝推广</span></a></li>
<li id="item3"><a href="#"><span>我要收款</span></a></li>
<li id="item4"><a href="#"><span>我要付款</span></a></li>
<li id="item5"><a href="#"><span>我的宝</span></a></li>
<li id="item6"><a href="#"><span>交易管理</span></a></li>
<li id="item7"><a href="#"><span>商户服务</span></a></li>
<li id="item8" class="no"><a href="#"><span>帮助中心</span></a></li>
<li class="ext1"></li>
</ul>
</div>
<div id="bot">
<ul class="sub-item" id="sub-item1">
<li class="ext2"></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
</ul>
<ul class="sub-item" id="sub-item2">
<li class="ext2"></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
</ul>
<ul class="sub-item" id="sub-item3">
<li class="ext2"></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
</ul>
<ul class="sub-item" id="sub-item4">
<li class="ext2"></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
</ul>
<ul class="sub-item" id="sub-item5">
<li class="ext2"></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
</ul>
<ul class="sub-item" id="sub-item6">
<li class="ext2"></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
</ul>
<ul class="sub-item" id="sub-item7">
<li class="ext2"></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
</ul>
<ul class="sub-item" id="sub-item8">
<li class="ext2"></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
</ul>
<ul class="sub-item" id="sub-item9">
<li class="ext2"></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
<li><a href="#"><span>我要提现</span></a></li>
</ul>
</div>
</div></body>
</html>
for ( j=1; j<10; j++){ //按顺序匹配菜单项和菜单内容
var nodeSubItem = document.getElementById("sub-item"+j);
if(nodeSubItem)
{
if ( linkNode == j ){ //如果菜单项和菜单内容匹配则显示,否则隐藏
nodeSubItem.style.display = "block";
}else{
nodeSubItem.style.display = "none";
}
}
}