对层和的运用

1.对<div>的运用

 

1.1运用在<fieldset>中，点击<legend>中的文字时显示不同的内容，

<%String ContextPath = request.getContextPath();String path=ContextPath +"/visitorTools/resources/images";%>

<input type="hidden" name="path" id="path" value="<%=path %>"/>

<fieldset>

<legend>

<a href="#"  onClick="isShowClose('img','test1','test2')">

<image id="img" src="<%=path%>/open.gif">主要信息

</a>

</legend>

<div id="test1"  >main information</div>

<div id="test2"  style="display:none">hidden information</div>

 

</fieldset>

 

<script language="javascript">

function isShowClose(imgid,showid,noneid)  {   var path = document.getElementById("path").value;   var style_display = document.getElementById(noneid).style.display;        if(style_display == 'none'){        document.getElementById(imgid).src = path +"/wlp-menu-closed.gif";    document.getElementById(showid).style.display ='none';    document.getElementById(noneid).style.display = 'block';   }   else {        document.getElementById(imgid).src = path +"/wlp-menu-open.gif";    document.getElementById(showid).style.display ='block';    document.getElementById(noneid).style.display = 'none';   }     }

 

</script>

1.2运用在单选框上，当点击具有相同name的不同单选按钮时(value值不同)，分别显示不同的内容。

<input type="radio" name="repeatPattern" id="repeatPattern"  value="norepeat" checked οnclick="javascript:_calendar_showRepeat(this)"><span>无</span>     <input type="radio" name="repeatPattern" id="repeatPattern" value="repeatdaily" οnclick="javascript:_calendar_showRepeat(this)"><span>天</span>

 

<div id="norepeat" > 不重复。 </div>

<div id="repeatdaily">按天重复</div>

注意：<div>中的id值与radio的value值一致。

<script language="javascript">

<!--

  function _calendar_showRepeat(obj)   {    var noRepeatElement = document.getElementById("norepeat"); var repeatDailyElement = document.getElementById("repeatdaily");    noRepeatElement.style.display ='none';    repeatDailyElement.style.display = 'none'; 

 document.getElementById(obj.value).style.display ='block';  }

// -->

</script>

 

2.<iframe>的运用

选择<select>的不同<option>,在<iframe>中展示不同的页面。

<select name="select" onChange="test(options[selectedIndex].value);">      <option value="<%=path%>/dayview.jsp">按天展示日历</option>     <option value="<%=path%>/monthview.jsp">按月展示日历</option>   </select>                            <script language="javascript">        function test(srcvalue){        document.getElementById("displayFrame").src = srcvalue;         }        </script>

 

 

<iframe id="displayFrame" width="800" height="800" 

name="displayFrame" src='<%=path%>/dayview.jsp' />

3.其它

3.1如何让一个按钮的背景图片。

 <button type="button" id="cancel" class="ButtonStyles" >        <img src="<%=path%>/wlp-X-16.gif" border="0">返回       </button>

3.2如何对<table>中内容进行显示和隐藏。

 <table width="200" border="0" id="test"><tr><td>infomation</td></tr>

 </table>

 

<table width="200" border="0" id="test"><tr><td>info</td></tr>

</table>

 

document.getElementsByName('test')[0].style.display = 'none';document.getElementsByName('test')[1].style.display = '';