实现网页中部分内容的展开与隐藏 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
 <style>
  
.wenti dl{width:660px;font-size:12px;}
.wenti dt{height:33px;color:#fff;padding-top:6px;font-weight:bold;padding-left:20px;cursor:pointer;text-indent:40px; line-height:33px; overflow:hidden}
.wenti dt.original{ background:url(bar4.jpg) no-repeat; height:33px; padding:0}
.wenti dt.focus{background:url(bar4.jpg) no-repeat; height:33px; padding:0}
.wenti dt.expand{background:url(bar3.jpg) no-repeat; height:33px; padding:0}
.wenti dd{display:none;padding:10px 40px 40px; overflow:hidden}
.wenti dd a{ color:#c02608}
.wenti dd p{ line-height:24px;}

 </style>

 <SCRIPT LANGUAGE="JavaScript">
   function show(){
     var obj=event.srcElement;

    //关闭所有dd
    var alldd=document.getElementsByTagName("DD");
    for(var i=0;i<alldd.length;i++){
       alldd[i].style.display="none";
       alldd[i].previousSibling.className="original";
    }

     if(obj.tagName=="DT"){
        var dd=obj.nextSibling;  //下一个节点
        var type=dd.style.display;
        if(type=="block"){
           obj.className='original';
           dd.style.display='none';
        }else{
           obj.className='expand';
           dd.style.display='block';
        }
         
     }
     
   }
 </SCRIPT>
 </HEAD>

 <BODY>
  <div class="wenti" style="width:640px; margin:0 auto;">  
     <dl  onclick="show()">
        <dt class="original">如何使用亿贝</dt>
        <dd>先看看我们特别为您准备的入门教程吧。<a href="http://www.865171.cn/">立即查看</a></dd>
        
        <dt class="original">我收到了手机短信，应该怎么使用？</dt>
        <dd>凭手机短信中的拉手券密码就可直接到店消费！</dd>
        
        <dt class="original">拉手券可以给朋友吗？</dt>
        <dd>
        <p><strong>方法一、</strong>在我的拉手券页面中,点“赠送”按钮,输入好友在拉手网的账号，就直接赠送给朋友了。<a href="http://www.865171.cn/">去看看吧</a></p><br/>
        <p><strong>方法二、</strong>直接转发短信或者将打印的拉手券交给朋友就可以啦！拉手券不是实名制的，所以也请您保管好自己的拉手账户哦！</p>
        </dd>     
     </dl>
 
  </div>

 </BODY>
</HTML>

 

posted @ 2012-10-20 18:19  邹晟  阅读(3314)  评论(0)  编辑  收藏  举报