zoukankan      html  css  js  c++  java
  • DIV层,点“+”展开,“-”关闭

    方法一:点击切换样式表实现内容折叠与展开

    <script language="javascript">
    function cc(obj)
    {
     if(obj.className == "aa")
     {
      obj.className = "bb";
     }
     else
      obj.className = "aa"; 
    }
    </script>

    <style>
    .aa {height:15px; overflow:hidden;}
    .bb {}
    </style>

    <div id="aa" onclick="cc(this)" class="bb">此处显示  id "aa" 的内容<br />aaa<br />ddd</div>

    方法二:

     
     
    <div class="class1">
    <h1>div展开收缩效果</h1>
    <span id="stateBut" onClick="$use()">展开</span>
    <p id="class1content">小蜗牛问妈妈:为什么我们从生下来,就要背负这个又硬又重的壳呢?<br />
    妈妈:因为我们的身体没有骨骼的支撑,只能爬,又爬不快。所以要这个壳的保护!<br />
    小蜗牛:毛虫姊姊没有骨头,也爬不快,为什么她却不用背这个又硬又重的壳呢? <br />
    妈妈:因为毛虫姊姊能变成蝴蝶,天空会保护她啊。 <br />
    小蜗牛:可是蚯蚓弟弟也没骨头爬不快,也不会变成蝴蝶他什么不背这个又硬又重的壳呢? <br />
    妈妈:因为蚯蚓弟弟会钻土, 大地会保护他啊。 <br />
    小蜗牛哭了起来:我们好可怜,天空不保护,大地也不保护。 <br />
    蜗牛妈妈安慰他:所以我们有壳啊!我们不靠天,也不靠地,我们靠自己。</p>
    </div>


    方法三:
    Code

    Code

    <div id="content">
    孤雁儿
    <span id="key" onclick="shoppingcat();">展开</span><br><br>
    世人作梅词,下笔便俗。予试作一篇,乃知前言不妄耳。<br><br>
    藤床纸帐朝眠起,<br>
    说不尽、无佳思。<br>
    沈香烟断玉炉寒,<br>
    伴我情怀如水。<br>
    笛声三弄,<br>
    梅心惊破,<br>
    多少春情意。<br><br>
    小风疏雨萧萧地,<br>
    又催下、千行泪。<br>
    吹箫人去玉楼空,<br>
    肠断与谁同倚?
    一枝折得,<br>
    人间天上,<br>
    没个人堪寄。
    </div>
  • 相关阅读:
    Atitit.随时间变色特效 ---包厢管理系统的规划
    Atitit.request http乱码的设计防止 检测与解决最近实践p825 attilax总结.doc
    Atitit.request http乱码的设计防止 检测与解决最近实践p825 attilax总结.doc
    atitit.薄伽梵歌overview  attilax 读后感
    Atitit。 《吠陀》 《梨俱吠陀》overview 经读后感  是印度上古时期一些文献的总称
    Atitit。 《吠陀》 《梨俱吠陀》overview 经读后感  是印度上古时期一些文献的总称
    atitit.薄伽梵歌overview  attilax 读后感
    Atitit 《摩奴法典》overivew 读后感 不是由国王 颁布的,而是 僧侣编制
    Atitit 《摩奴法典》overivew 读后感 不是由国王 颁布的,而是 僧侣编制
    Atitit.执行cli cmd的原理与调试
  • 原文地址:https://www.cnblogs.com/5tao/p/1289803.html
Copyright © 2011-2022 走看看