[交流] css中如何实现div的显示和隐藏 [复制链接]
查看:1363 | 回复:6

itolqtbl · 发表于 2012-10-12 23:59:27

1.对于多个DIV的显示和隐藏
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
      <title>无标题文档</title>
      <script langauge="javaScript" type="text/javascript">
      function showDiv(i)
      {
         for(j=0;j<=6;j++)
         {
            document.getElementById('div'+j).style.display='none';
         }
         document.getElementById('div'+i).style.display='block';
      }
      </script>
   </head>
   <body >
      <form>
         <table width="700" border="1" cellspacing="0" cellpadding="0">
         <tr>
            <td colspan="2"> </td>
         </tr>
         <tr>
            <td width="169" height="283"><table width="100%" border="1" cellspacing="0" cellpadding="0">
         <tr>
            <td height="30"><div align="center"><input type=button value="showDiv0" onclick="showDiv(0);">
            会员管理</div></td>
         </tr>
         <tr>
            <td height="30"><input type=button value="showDiv1" onclick="showDiv(1);"></td>
         </tr>
         <tr>
            <td height="30"><input type=button value="showDiv2" onclick="showDiv(2);"></td>
         </tr>
         <tr>
            <td height="30"><input type=button value="showDiv3" onclick="showDiv(3);"></td>
         </tr>
         <tr>
            <td height="30"><input type=button value="showDiv4" onclick="showDiv(4);"></td>
         </tr>
         <tr>
            <td height="30"><input type=button value="showDiv5" onclick="showDiv(5);"></td>
         </tr>
         <tr>
            <td height="30"><input type=button value="showDiv6" onclick="showDiv(6);"></td>
         </tr>
      </table></td>
         <td width="525">
      <div id=div0 >ggggg</div>
      <div id=div1 >ggggg</div>
      <div id=div2 >bbbbb</div>
      <div id=div3 >ccccc</div>
      <div id=div4 >ddddd</div>
      <div id=div5 >eeeee</div>
      <div id=div6 >fffff</div>
      </td>
      </tr>
         </table>
      </form>
      </body>
</html>

2.单个DIV的显示的隐藏
visibility隐藏的对象还保留对象显示时所占的物理空间，display则不保留。可以保存下面的代码看看效果：
具体步骤：
      代码示例：

      <div style="border:1px solid #000;background:#eee">
      <span style="width:200;height:200;visibility:hidden"></span>
         ←SS属性为visibility:hidden的对象
      </div><br>
      <div style="border:1px solid #000;background:#666">
      <span style="width:200;height:200;display:none"></span>
      ←SS属性为display:none的对象
      </div>

      特别提示
      用visibility属性控制隐藏的对象还占据着它显示时的位置，而display则没有。

      特别说明

      display属性设置元素的显示方式，对应脚本特性为display，可选值为none、block和inline，各值的说明如下：
      none 隐藏元素，不保留元素显示时的空间。
      block块方式显示元素。
      inline 以内嵌方式显示元素。
      inline-block对象显示为内嵌元素，但所有子对象都显示为块元素，相邻的内嵌元素将显示在同一行，允许空格。
      list-item 将块元素显示为列表对象，并可以添加项目标点。(需要IE6.0+支持)
      table-header-group 将元素作为表格标题组显示，相当于tHead元素。
      table-footer-group 将元素作为表格脚注组显示，相当于tFoot元素。
      visibility属性设置是否显示元素，对应的脚本特性为visibility，可选值为inherit、hidden和visible，各值的说明如下：
      inherit 继承父元素的visibility属性设置。
      hidden 隐藏元素，但保留其所占空间。
      visible 显示元素(默认值)。

aincemiss8898 · 发表于 2012-10-13 12:16:56

顶楼主我来支持你的哦。

卖奶茶原料的 · 发表于 2012-10-13 12:56:44

用visibility属性控制隐藏的对象还占据着它显示时的位置，而display则没有。

这个以前不晓得呢

aincemiss · 发表于 2012-10-17 11:44:13

提示: 作者被禁止或删除内容自动屏蔽

aincemiss · 发表于 2012-10-21 23:30:39

提示: 作者被禁止或删除内容自动屏蔽

HFoxconn.cn · 发表于 2012-10-22 08:52:56

提示: 作者被禁止或删除内容自动屏蔽

jjjjkkkkqq · 发表于 2012-10-24 14:18:17

必须收藏，学习第一，落伍真是站长学习园地

百独托管7500 紫田网络	超高转化播放器收cps[推荐]	速盾CDN 免实名免备防屏蔽	阿里云爆款特卖9.9元封顶	提升alexa、IP流量7Q5团队
【腾讯云】中小企福利专场	【腾讯云】多款产品1折起	高防随时退换好耶数据	小飞国外网赚带你月入万元	炎黄网络4H4G10M 99每月
香港带宽CN2/美国站群优惠	中客数据中心服务器租用	联盟系统移动广告平台中易	企业专场腾讯云服务器2.5折	九九数据工信部正规资质
腾讯云新用户大礼包代金券	高价收cpa注册量高价展示	【腾讯云】2核2G/9.93起	租服务器找45互联随时退换	阿里云短信服务验证秒达

[交流] css中如何实现div的显示和隐藏 [复制链接]
查看:1363 | 回复:6

相关帖子

QQ绑定

落伍手机绑定

[交流] css中如何实现div的显示和隐藏 [复制链接] 查看:1363 | 回复:6

相关帖子

QQ绑定

落伍手机绑定

[交流] css中如何实现div的显示和隐藏 [复制链接]
查看:1363 | 回复:6