用户
 找回密码
 入住 CI 中国社区
搜索
CodeIgniter 中国开发者社区»论坛 › Developers › Web 开发综合讨论 › 左边菜单右边显示内容的问题
返回列表 发新帖
查看: 2133|回复: 0
收起左侧

左边菜单右边显示内容的问题

[复制链接]
yxw_1314
发表于 2014-7-26 10:25:18 | 显示全部楼层 |阅读模式
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript">
<!--//
function ShowMenu(obj,n){
var Nav = obj.parentNode;
//alert(Nav.id);得到父节点id=menu的menu
if(!Nav.id){
  var BName = Nav.getElementsByTagName("ul");
  var HName = Nav.getElementsByTagName("h2");
  var t = 2;
}else{
  var BName = document.getElementById(Nav.id).getElementsByTagName("span");
  var HName = document.getElementById(Nav.id).getElementsByTagName("h1");
  var t = 1;
}
for(var i=0; i<HName.length;i++){
  HName[i].innerHTML = HName[i].innerHTML.replace("-","+");
  HName[i].className = "";
}
obj.className = "h" + t;
for(var i=0; i<BName.length; i++){if(i!=n){BName[i].className = "no";}}
if(BName[n].className == "no"){
  BName[n].className = "";
  obj.innerHTML = obj.innerHTML.replace("+","-");
}else{
  BName[n].className = "no";
  obj.className = "";
  obj.innerHTML = obj.innerHTML.replace("-","+");
}
}
//-->
</script>
<style>
*,body,ul,h1,h2{ margin:0; padding:0; list-style:none;}
body{font:12px "宋体"; }
a{ color:#777;border:none;}
#left { width:200px; margin:auto;position:absolute;background-color:blue;height:300px;}
#left h1 { font-size:12px; border:#E7E7E7 1px solid; margin-top:1px;  background-color:#F1F1F1;height:33px;line-height:33px;}
#left h2 { font-size:12px; border:#E7E7E7 1px solid; border-top-color:#FFF; background-color:#F9F9F9;height:30px;line-heigth:30px;}
#left ul { padding-left:15px; height:100px;border:#E7E7E7 1px solid; border-top:none;overflow:auto;}
#left a { display:block; padding:5px 0 3px 10px; text-decoration:none; overflow:hidden;}
#left a:hover{ color:black; background:white;}
#left .no {display:none;}
#left .h1 a{color:#06F;}
#left .h2 a{color:#09F;}
#left ul li{cursor:pointer;}

.right{
        position:absolute;
        left:200px;
        top:0px;
}
.all{top:1px;width:100%;position:relative;background-color:pink;height:500px;}
</style>
</head>
<body>
<script type="text/javascript">
function setTab(m,n){
var tli=document.getElementById("leftmenu"+m).getElementsByTagName("li");//ul下的li
var mli=document.getElementById("mcont"+m).getElementsByTagName("ul");//显示内容里的ul
for(i=0;i<tli.length;i++){
  mli[i].style.display=i==n?"block":"none";
  tli[i].className=i==n?"hover":"";
}
}</script>
<div class="all">
<div id="left">
<h1 onClick="javascript:ShowMenu(this,0)"><a href="#">+ 概要数据</a></a></h1>
<span class="no">
  <h2 onClick="javascript:ShowMenu(this,0)"><a href="#">&nbsp;&nbsp;+ 一级菜单A_1</a></a></h2>
  <ul class="no" id="leftmenu0">
   <li onclick="setTab(0,0)">图表111111111</li>
   <li onclick="setTab(0,1)">图表222222222</li>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,1)"><a href="#">&nbsp;&nbsp;+ 一级菜单A_2</a></h2>
  <ul class="no" id="leftmenu1" >
   <li onclick="setTab(1,0)">图表111111111</li>
   <li onclick="setTab(1,1)">图表222222222</li>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,2)"><a href="#">&nbsp;&nbsp;+ 一级菜单A_3</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">一级菜单A_0</a>
   <a href="javascript:void(0)">一级菜单A_1</a>
   <a href="javascript:void(0)">一级菜单A_2</a>
   <a href="javascript:void(0)">一级菜单A_3</a>
   <a href="javascript:void(0)">一级菜单A_4</a>
   <a href="javascript:void(0)">一级菜单A_5</a>
   <a href="javascript:void(0)">一级菜单A_6</a>
   <a href="javascript:void(0)">一级菜单A_7</a>
   <a href="javascript:void(0)">一级菜单A_8</a>
   <a href="javascript:void(0)">一级菜单A_9</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,3)"><a href="javascript:void(0)">&nbsp;&nbsp;+ 一级菜单A_4</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">一级菜单A_0</a>
   <a href="javascript:void(0)">一级菜单A_1</a>
   <a href="javascript:void(0)">一级菜单A_2</a>
   <a href="javascript:void(0)">一级菜单A_3</a>
   <a href="javascript:void(0)">一级菜单A_4</a>
   <a href="javascript:void(0)">一级菜单A_5</a>
   <a href="javascript:void(0)">一级菜单A_6</a>
   <a href="javascript:void(0)">一级菜单A_7</a>
   <a href="javascript:void(0)">一级菜单A_8</a>
   <a href="javascript:void(0)">一级菜单A_9</a>
  </ul>
</span>
        
<h1 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 用户类数</a></h1>
<span class="no">
  <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">&nbsp;&nbsp;+ 注册用户</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">注册新增用户</a>
   <a href="javascript:void(0)">新注册用户渠道分布</a>
   <a href="javascript:void(0)">每小时新增用户数</a>
   <a href="javascript:void(0)">新注册用户运营商分布</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">&nbsp;&nbsp;+ 有效用户</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">二级菜单B_0</a>
   <a href="javascript:void(0)">二级菜单B_1</a>
   <a href="javascript:void(0)">二级菜单B_2</a>
   <a href="javascript:void(0)">二级菜单B_3</a>
   <a href="javascript:void(0)">二级菜单B_4</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,2)"><a href="javascript:void(0)">&nbsp;&nbsp;+ 活跃回流</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">活跃用户</a>
   <a href="javascript:void(0)">流失用户</a>
   <a href="javascript:void(0)">回流用户</a>
   <a href="javascript:void(0)">活跃用户流失率</a>
   <a href="javascript:void(0)">流失用户回流率</a>
   <a href="javascript:void(0)">活跃流失回流用户等级分布</a>
  </ul>
</span>
   
<h1 onClick="javascript:ShowMenu(this,2)"><a href="javascript:void(0)">+ 新注册用户流失</a></h1>
<span class="no">
  <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">&nbsp;&nbsp;+ 三级菜单C_1</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">三级菜单C_0</a>
   <a href="javascript:void(0)">三级菜单C_1</a>
   <a href="javascript:void(0)">三级菜单C_2</a>
   <a href="javascript:void(0)">三级菜单C_3</a>
   <a href="javascript:void(0)">三级菜单C_4</a>
   <a href="javascript:void(0)">三级菜单C_5</a>
   <a href="javascript:void(0)">三级菜单C_6</a>
   <a href="javascript:void(0)">三级菜单C_7</a>
   <a href="javascript:void(0)">三级菜单C_8</a>
   <a href="javascript:void(0)">三级菜单C_9</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">&nbsp;&nbsp;+ 三级菜单C_2</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">三级菜单C_0</a>
   <a href="javascript:void(0)">三级菜单C_1</a>
   <a href="javascript:void(0)">三级菜单C_2</a>
   <a href="javascript:void(0)">三级菜单C_3</a>
   <a href="javascript:void(0)">三级菜单C_4</a>
   <a href="javascript:void(0)">三级菜单C_5</a>
   <a href="javascript:void(0)">三级菜单C_6</a>
   <a href="javascript:void(0)">三级菜单C_7</a>
   <a href="javascript:void(0)">三级菜单C_8</a>
   <a href="javascript:void(0)">三级菜单C_9</a>
  </ul>
</span>
   
<h1 onClick="javascript:ShowMenu(this,3)"><a href="javascript:void(0)">+ 新注册用户流存</a></h1>
<span class="no">
  <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">&nbsp;&nbsp;+ 次日3日7日流存</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">四级菜单D_0</a>
   <a href="javascript:void(0)">四级菜单D_1</a>
   <a href="javascript:void(0)">四级菜单D_2</a>
   <a href="javascript:void(0)">四级菜单D_3</a>
   <a href="javascript:void(0)">四级菜单D_4</a>
   <a href="javascript:void(0)">四级菜单D_5</a>
   <a href="javascript:void(0)">四级菜单D_6</a>
   <a href="javascript:void(0)">四级菜单D_7</a>
   <a href="javascript:void(0)">四级菜单D_8</a>
   <a href="javascript:void(0)">四级菜单D_9</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">&nbsp;&nbsp;+ 四级菜单D_2</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">四级菜单D_0</a>
   <a href="javascript:void(0)">四级菜单D_1</a>
   <a href="javascript:void(0)">四级菜单D_2</a>
   <a href="javascript:void(0)">四级菜单D_3</a>
   <a href="javascript:void(0)">四级菜单D_4</a>
   <a href="javascript:void(0)">四级菜单D_5</a>
   <a href="javascript:void(0)">四级菜单D_6</a>
   <a href="javascript:void(0)">四级菜单D_7</a>
   <a href="javascript:void(0)">四级菜单D_8</a>
   <a href="javascript:void(0)">四级菜单D_9</a>
  </ul>
</span>

<h1 onClick="javascript:ShowMenu(this,4)"><a href="javascript:void(0)">+ 渠道类</a></h1>
<span class="no">
  <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">&nbsp;&nbsp;+ 渠道新增</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">四级菜单D_0</a>
   <a href="javascript:void(0)">四级菜单D_1</a>
   <a href="javascript:void(0)">四级菜单D_2</a>
   <a href="javascript:void(0)">四级菜单D_3</a>
   <a href="javascript:void(0)">四级菜单D_4</a>
   <a href="javascript:void(0)">四级菜单D_5</a>
   <a href="javascript:void(0)">四级菜单D_6</a>
   <a href="javascript:void(0)">四级菜单D_7</a>
   <a href="javascript:void(0)">四级菜单D_8</a>
   <a href="javascript:void(0)">四级菜单D_9</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">&nbsp;&nbsp;+ 渠道流程</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">四级菜单D_0</a>
   <a href="javascript:void(0)">四级菜单D_1</a>
   <a href="javascript:void(0)">四级菜单D_2</a>
   <a href="javascript:void(0)">四级菜单D_3</a>
   <a href="javascript:void(0)">四级菜单D_4</a>
  </ul>
</span>

  <h1 onClick="javascript:ShowMenu(this,5)"><a href="javascript:void(0)">+ 游戏类数据</a></h1>
<span class="no">
  <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">&nbsp;&nbsp;+ 游戏</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">四级菜单D_0</a>
   <a href="javascript:void(0)">四级菜单D_1</a>
   <a href="javascript:void(0)">四级菜单D_2</a>
   <a href="javascript:void(0)">四级菜单D_3</a>
   <a href="javascript:void(0)">四级菜单D_4</a>
   <a href="javascript:void(0)">四级菜单D_5</a>
   <a href="javascript:void(0)">四级菜单D_6</a>
   <a href="javascript:void(0)">四级菜单D_7</a>
   <a href="javascript:void(0)">四级菜单D_8</a>
   <a href="javascript:void(0)">四级菜单D_9</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">&nbsp;&nbsp;+ 游戏</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">四级菜单D_0</a>
   <a href="javascript:void(0)">四级菜单D_1</a>
   <a href="javascript:void(0)">四级菜单D_2</a>
   <a href="javascript:void(0)">四级菜单D_3</a>
   <a href="javascript:void(0)">四级菜单D_4</a>
  </ul>
</span>

  <h1 onClick="javascript:ShowMenu(this,6)"><a href="javascript:void(0)">+ 收入类数据</a></h1>
<span class="no">
  <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">&nbsp;&nbsp;+ 收入概要</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">付费用户数</a>
   <a href="javascript:void(0)">付费总额</a>
   <a href="javascript:void(0)">ARPU值</a>
   <a href="javascript:void(0)">充值渗透率</a>
   <a href="javascript:void(0)">付费次数</a>
   <a href="javascript:void(0)">付费总额/DAU</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">&nbsp;&nbsp;+ 按日月充值额度分布</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">四级菜单D_0</a>
   <a href="javascript:void(0)">四级菜单D_1</a>
   <a href="javascript:void(0)">四级菜单D_2</a>
   <a href="javascript:void(0)">四级菜单D_3</a>
   <a href="javascript:void(0)">四级菜单D_4</a>
  </ul>
   <h2 onClick="javascript:ShowMenu(this,2)"><a href="javascript:void(0)">&nbsp;&nbsp;+ 付费用户按月付费天数分布</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">四级菜单D_0</a>
   <a href="javascript:void(0)">四级菜单D_1</a>
   <a href="javascript:void(0)">四级菜单D_2</a>
   <a href="javascript:void(0)">四级菜单D_3</a>
   <a href="javascript:void(0)">四级菜单D_4</a>
  </ul>
   <h2 onClick="javascript:ShowMenu(this,3)"><a href="javascript:void(0)">&nbsp;&nbsp;+ 货币产出与消耗</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">四级菜单D_0</a>
   <a href="javascript:void(0)">四级菜单D_1</a>
   <a href="javascript:void(0)">四级菜单D_2</a>
   <a href="javascript:void(0)">四级菜单D_3</a>
   <a href="javascript:void(0)">四级菜单D_4</a>
  </ul>
</span>

<!-- 右边显示内容 -->
<div id="mcont0" class="right">

<ul class="block" style="display: none">111111111</ul>

<ul class="block" style="display: none">222222222</ul>

</div>
<div id="mcont1" class="right">

<ul class="block" style="display:none ">3333</ul>

<ul class="block" style="display: none">22222</ul>

</div>


</div>
</body>
QQ截图20140726102439.png
回复

使用道具 举报

返回列表 发新帖

本版积分规则