zoukankan      html  css  js  c++  java
  • 查看更多 详细介绍+点击收起 效果

    <!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>
    </head>
    
    <body>
    
    
    
    <DIV id=soft_instr name="soft_instr">
    1<br />
    2<br />
    3<br />
    4<br />
    5<br />
    6<br />
    1111111111<br />
    22222222222<br />
    3333333333<br />
    444444444444<br />
    5555555555555<br />
    666666666666666666<br />
    
    
    </DIV>
    
    
    <DIV id=comm_1 name="comm_1"></DIV>
    <DIV id=comm_2 style="DISPLAY: none" name="comm_2"></DIV>    
    <DIV id=comm_3 style="DISPLAY: none;" name="comm_3">
        <SPAN>
            <INPUT onclick="this.value==='详细介绍'?this.value='点击收起':this.value='详细介绍';show_brief();" type=button value="详细介绍" name=botton>
        </SPAN>
    </DIV>
    
    
    <SCRIPT type=text/javascript> 
            document.getElementById('comm_1').innerHTML=document.getElementById('soft_instr').innerHTML; 
            document.getElementById('comm_2').innerHTML=document.getElementById('soft_instr').innerHTML; 
           
           function show_brief(){
                var obj1=document.getElementById('comm_1');
                var obj2=document.getElementById('comm_2');
                if(obj1.style.display==""){
                    obj1.style.display="none";       
                    obj2.style.display="";   
                     obj2.innerHTML=document.getElementById('soft_instr').innerHTML;
                }else{
                    obj2.style.display="none";
                    obj1.style.display="";
                     obj1.innerHTML=document.getElementById('soft_instr').innerHTML; 
                }
                
           }
                
                 var _h=document.getElementById('comm_1').offsetHeight;
                  document.getElementById('soft_instr').style.display="none";
     
                if(_h > 200){
                    document.getElementById('comm_1').style.height="107px";
                    document.getElementById('comm_1').style.overflow="hidden";
                    document.getElementById('comm_3').style.display="block";
                }
               
        </SCRIPT>
    
    
    </body>
    </html>
  • 相关阅读:
    来自网络的双参求范围问题,没有单参求范围那么有套路!
    svn更改用户问题
    html控件中上传文件的技巧
    认识jsp
    dom4j 解析XML文件
    BaseDao优化
    JDBC连接数据库
    javascript常用函数
    jQuery formValidator(插件)
    javascriptDetect对象封装
  • 原文地址:https://www.cnblogs.com/visi_zhangyang/p/2549708.html
Copyright © 2011-2022 走看看