码迷,mamicode.com
首页 > 其他好文 > 详细

简单易用的点击展开伸缩效果

时间:2015-03-13 16:14:07      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:

<SCRIPT>
function openP(_id)
    {
       var select_id = parseInt(_id.replace("box",""));
       for (i=1;i<=4;i++)
       {
          if (i==select_id)
          {
              document.getElementById("box"+i).style.display = "block";
          }
          else
          {
             document.getElementById("box"+i).style.display = "none";
          }
       }
    }
</SCRIPT>
 1 <a href="###" onmouseover="openP(‘box1‘)">1、点击展开1</a>
 2 <p id="box1">
 3    这里面放的是box1的内容.
 4 </p>
 5 <p><a href="###" onmouseover="openP(‘box2‘)">2、点击展开2</a></p>
 6 <p id="box2" style="display:none">
 7    这里面放的是box2的内容.
 8 </p>
 9 <a href="###" onmouseover="openP(‘box3‘)">3、点击展开3</a>
10 <p id="box3" style="display:none">
11    这里面放的是box3的内容.
12 </p>
13 <p><a href="###" onmouseover="openP(‘box4‘)">4、点击展开4</a></p>
14 <p id="box4" style="display:none">
15    这里面放的是box4的内容.
16 </p>
17 <br />
18 <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>

 

简单易用的点击展开伸缩效果

标签:

原文地址:http://www.cnblogs.com/q460021417/p/4335262.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!