开关效果运用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript" src="switchmenu.js"></script> 
<style type="text/css"> 
<!-- 
.menutitle
{ 
cursor
:pointer; 
margin-bottom
: 2px; 
padding
: 2px; 
color
:#000; 
width
:120px; 
text-align
:center; 
background
:#efefef; 
border-right
: #999 1px solid; 
border-bottom
: #999 1px solid; 
}
 
.submenu
{ 
display
: none; 
margin-left
: 10px; 
margin-bottom
: 5px; 
}
 
--> 
</style> 
 </HEAD>

 <BODY>
  <div id="maindiv"> 
<div class="menutitle" οnclick="switchmenu('sub1')">menu1</div> 
<span class="submenu" id="sub1"> 
- <a href="#">text-1</a> <br /> 
- <a href="#">text-2</a> 
</span> 
<div class="menutitle" οnclick="switchmenu('sub2')">menu2</div> 
<span class="submenu" id="sub2"> 
- <a href="#">text-1</a> <br /> 
</span> 
<div class="menutitle" οnclick="switchmenu('sub3')">menu3</div> 
<span class="submenu" id="sub3"> 
- <a href="#">text-1</a> <br /> 
</span> 
</div> 

 </BODY>
</HTML>

js原文件:

 

function  switchmenu(obj) {
        
if(document.getElementById){
        
var el = document.getElementById(obj);
        
var ar = document.getElementById("maindiv").getElementsByTagName("span"); 
                
if(el.style.display != "block"){
                        
for (var i=0; i<ar.length; i++){
                                
if (ar[i].className=="submenu"
                                ar[i].style.display 
= "none";
                        }

                        el.style.display 
= "block";
                }
else{
                        el.style.display 
= "none";
                }

        }

}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值