div的隐藏与显示

 

      div的隐藏和显示在js中经常用到，下面以一个实例为例，用脚本如何控制div的隐藏与显示，请看图

 

 

我想实现这样的功能，点击“药房介绍管理”，”修改简介“消失，再次点击，“修改简介”又重新出现，效果如下图

 

那么这样的效果如何实现的呢？

先看页面代码

<tr>
    <td align="center" valign="top"><span class="linkfont">◆&nbsp;<a href="#" οnclick="return showjj();" target="_self">药房介绍管理</a></span>
    <div id="yfgl" style="display:none;">
      <ul style="list-style-type:none;">
        <li><a href="updatejj.asp" target="mainFrame">修改简介</a></li>
      </ul>
    </div>
    </td>
  </tr>

注意“修改简介”所在的div的display:none;表示初始是隐藏状态，那么我点击”药房介绍管理“，要求“修改简介”显示出来，再次点击，又隐藏。注意onclick事件代码 showjj();

  function showjj(){
         var yfgl =  document.getElementById('yfgl');
      if (yfgl.style.display == "none"){
        yfgl.style.display = "block";
      }
      else{
       yfgl.style.display = "none";
      }           
      return false;
  }

showjj这段js，首先得到“修改简介”的div的id，然后动态修改它的style样式，如果display=="none",也就是隐藏，则设置display="block"，显示出来，反之则否。

是不是很简单，其实js并没有那么难，只要我们勤动手，慢慢就熟练了。

	诺基亚N78 现在，一切完美融合，全新原装，实力公司『蓝优手机』
	1620.0元