首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

JS统制DIV隐藏显示

2012-09-23 
JS控制DIV隐藏显示a hrefjavascript:changeBody(1)模块A/a a hrefjavascript:changeBody(2)模

JS控制DIV隐藏显示

<a href="javascript:changeBody(1)">模块A</a> <a href="javascript:changeBody(2)">模块B</a> <a href="javascript:changeBody(3)">模块C</a> <div style="display: none" id="iDBody1"></div> <div style="display: none" id="iDBody2"></div> <div style="display: none" id="iDBody3"></div>
?
function changeBody(index){  switch(index){    case 1:{      document.getElementById('iDBody1').style.display = "";      document.getElementById('iDBody2').style.display = "none";      document.getElementById('iDBody3').style.display = "none";    }    case 2:{      document.getElementById('iDBody1').style.display = "none";      document.getElementById('iDBody2').style.display = "";      document.getElementById('iDBody3').style.display = "none";    }    case 3:{      document.getElementById('iDBody1').style.display = "none";      document.getElementById('iDBody2').style.display = "none";      document.getElementById('iDBody3').style.display = "";    }  }}

?--------------------------------------------------------

我的应用

function changeTable(str)      {     var index = parseInt(str);    switch(index){    case 0:{      document.getElementById('type1div').style.display = "";      document.getElementById('type2div').style.display = "none";      break;    }    case 1:{      document.getElementById('type2div').style.display = "";      document.getElementById('type1div').style.display = "none";      break;    }    default:{      document.getElementById('type1div').style.display = "";      document.getElementById('type2div').style.display = "none";      break;    }  }
?
          <table style="width:60%;">            <tr>            <td>&nbsp;&nbsp;             <select name="type" id="type" onchange="changeTable(this.options[this.options.selectedIndex].value)">     <%String[] types = {"机动车保有量信息","路内停车位信息"};%>     <option value="-请选择信息种类-" selected>-请选择信息种类-</option>     <%      for(int i=0;i<types.length; i++){     String type = types[i];     %>     <option value="<%out.print(i); %>" ><%out.print(type); %></option>     <%     }     %>     </select>&nbsp;信息种类            </td>            <td>&nbsp;&nbsp;             <select name="year" id="year">     <%String[] years = {"2009","2010","2011","2012","2013","2014","2015","2016","2017","2018","2019","2020","2021"};     request.setAttribute("years",years);     %>     <option value="-请选择年份-" selected>-请选择年份-</option>     <c:forEach var="year" items="${years}">      <option value="${year }" >${year }</option>     </c:forEach>     </select>&nbsp;年             </td>            <td>&nbsp;&nbsp;             <select name="month" id="month">     <%String[] months = {"01","02","03","04","05","06","07","08","09","10","11","12"};     request.setAttribute("months",months);     %>     <option value="-请选择月份-" selected>-请选择月份-</option>     <c:forEach var="month" items="${months}">      <option value="${month }" >${month }</option>     </c:forEach>     </select>&nbsp;月             </td>            </tr>          </table>         <img src="images/sjsc.gif" width="80" height="21" border="0" onClick="MM_openBrWindow()"/>&nbsp;          <a href='exportExcel.action' >   <img src="images/sjxz.gif" width="80" height="21" border="0">   </a>         </fieldset>      </form>      <div id="type1div">      <table id="typet1" style="margin-top:20px;" border="1">          <tr>            <th>统计区县${request.type}</th>            <th>车辆类型</th>            <th>当月个区县机动车总数量</th>            <th>当月个区县新增车辆数量</th>            <th>当月各区县报废车辆数量</th>            <th>当月各区县转出车辆数量</th>            <th>统计时间</th>            <th>审核</th>          </tr>          <tr>            <td>&nbsp;</td>            <td>&nbsp;</td>            <td>&nbsp;</td>            <td>&nbsp;</td>            <td>&nbsp;</td>            <td>&nbsp;</td>            <td>&nbsp;</td>            <td>&nbsp;</td>          </tr>    </table>      </div>
?

热点排行