`

JS控制DIV隐藏显示

    博客分类:
  • Html
阅读更多
<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 class="table_back" 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 class="table_back2" 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>
 
分享到:
评论

相关推荐

    ajax控制div窗口显示和隐藏

    本主题主要关注如何使用Ajax来控制div窗口的显示和隐藏,这对于实现交互式用户体验至关重要。 一、Ajax基础 Ajax的核心是JavaScript对象XMLHttpRequest,它在后台与服务器进行通信,实现了异步数据传输。创建一个...

    JS实现各种动态显示隐藏div效果

    在JavaScript(JS)中,动态显示和隐藏div元素是网页交互设计中常用的技术,它可以提升用户体验,让网页更具活力。本文将深入探讨如何利用JS来实现卷动显示隐藏、渐变显示隐藏以及大小缩放显示隐藏的效果。 1. **...

    onclick事件实现div的隐藏和显示

    打开这个文件,你可以看到一个实际运行的示例,并可以通过修改代码来进一步理解 `onclick` 事件和 `div` 隐藏显示的机制。此外,也可以学习如何利用浏览器的开发者工具进行实时查看和调试,这对于提升网页开发技能...

    JS做的隐藏与显示DIV可拖动弹出层

    在"JS做的隐藏与显示DIV可拖动弹出层"这个实例中,我们将探讨如何利用JavaScript来创建一个可拖动的弹出层,并控制其显示与隐藏。 首先,让我们理解`div`层的隐藏与显示。在HTML中,我们创建一个`div`元素并为其...

    javascript DIV隐藏、显示 弹出式窗口样式

    在这个场景中,我们关注的是如何利用JavaScript控制HTML中的`&lt;div&gt;`元素,以及如何实现弹出式窗口的样式。 首先,`&lt;div&gt;`是HTML中的一个通用容器元素,常用于组织页面布局或封装其他元素。在JavaScript中,我们可以...

    js控制div左右切换带左右箭头

    在网页设计中,"js控制div左右切换带左右箭头"是一种常见的交互效果,它用于展示多内容区域,用户可以通过点击或悬浮在左、右箭头上实现内容的切换。这种效果常见于产品展示、轮播图或者选项卡式布局中,能够提供...

    js实现多div的显示和隐藏

    下面是一个简单的例子,展示了如何用JavaScript控制单个div的显示和隐藏: ```html &lt;div id="content1"&gt;这是内容1&lt;/div&gt; ('content1')"&gt;切换显示 function toggleVisibility(id) { var element = document....

    JS显示隐藏DIV(动画效果)

    在本主题"JS显示隐藏DIV(动画效果)"中,我们将深入探讨如何利用JavaScript来控制HTML元素,特别是`&lt;div&gt;`标签的显示和隐藏,并且添加动画效果。这将提升用户体验,使网页更具动态性和吸引力。 首先,`&lt;div&gt;`是HTML...

    Div显示与隐藏网页制作

    1. **JavaScript显示和隐藏Div**: - `style.display`属性:通过改变`Div`的`display`属性值,我们可以控制其是否可见。默认情况下,`display:none`会使元素不显示,而`display:block`则会使其恢复正常显示。 ```...

    javascript实现显示和隐藏div方法汇总

    在JavaScript中,显示和隐藏`div`元素是前端开发中常见的需求。本篇文章将汇总15种不同的方法来实现这一功能。以下是对这些方法的详细解释: 1. **`display: block/none`**: - `display: block`使元素呈现在页面...

    网页设计div的显示和隐藏

    而如何有效地控制div元素的显示与隐藏,则是实现交互式设计的重要手段之一。本文将详细介绍如何通过CSS属性(如`visibility`和`display`)以及JavaScript来实现div的显示与隐藏功能。 #### 一、CSS中的visibility...

    精美的div隐藏与显示

    在这个“精美的div隐藏与显示”的主题中,我们将探讨如何使用JavaScript(特别是jQuery库)来实现`div`元素的动态效果,如滑动、淡入淡出以及隐藏和显示。 首先,让我们关注jQuery库。jQuery是一个轻量级的...

    div显示隐藏效果

    此外,现代前端框架如Vue.js、React或Angular提供了更高级的方式来控制组件的显示和隐藏,例如Vue的`v-if`或`v-show`指令,React的`state`和条件渲染等。这些框架允许开发者以声明式的方式管理元素的可见性,使代码...

    js鼠标浮动显示div

    这种技术的核心是利用事件监听器来捕捉鼠标的移动,并根据鼠标的移动来控制div元素的显示与隐藏。在本案例中,"js鼠标浮动显示div"指的是当鼠标移动到特定的input元素上时,会显示出一个div层,该div层中包含有与...

    js控制层隐藏和显示

    在JavaScript中,控制层的隐藏和显示是网页交互性中的基本操作,广泛应用于各种功能,如弹出框、菜单、提示信息等。本主题主要涉及两种实现方式:点击事件触发和鼠标移动事件触发。 首先,我们来探讨点击事件触发的...

    ASPnet(C#)中的DIV的显示隐藏问题

    ### ASP.NET中DIV的显示与隐藏技巧 在ASP.NET Web应用程序开发中,用户界面的动态控制是一项非常重要的技能。特别是对于那些需要根据用户操作或某些条件来改变显示内容的应用程序来说,能够有效地显示或隐藏控件是...

    javascript学习笔记(1) 缓动效果显示隐藏div

    本篇文章将聚焦于如何利用JavaScript实现缓动效果来控制div的显示与隐藏。 首先,我们需要了解什么是缓动效果。缓动效果是指在物体运动过程中,不是简单的线性变化,而是通过加速或减速来模拟真实世界中的物理运动...

    Div显示隐藏

    在网页设计和开发中,`div` 是一个非常基础且...在实际项目中,还可以考虑使用 JavaScript 或者现代前端框架(如 React、Vue 或 Angular)来实现更为复杂的交互逻辑,但基本原理仍然是基于 `div` 元素的显示与隐藏。

    鼠标经过显示隐藏div

    在Web开发中,通过JavaScript(简称JS)和CSS结合可以实现很多动态效果,其中“鼠标经过显示隐藏div”就是一个非常实用的功能。本文将详细解析如何利用这些技术来实现一个响应鼠标事件、能够显示和隐藏特定元素(本...

    隐藏与显示事件

    在标题“隐藏与显示事件”中,我们关注的是如何通过编程控制UI元素的可见性,使得用户能够根据需求查看或隐藏特定内容。这种技术在电子商务网站、应用程序和其他互动式平台中尤其常见,例如在描述中提到的场景:点击...

Global site tag (gtag.js) - Google Analytics