`

tab 的实现

阅读更多
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>调运单详细</title>
		<script type="text/javascript">
		  function tab1(){
		   document.getElementById("tab1").style.display='block';
		   document.getElementById("tab2").style.display='none';
		  }
		  function tab2(){
		   document.getElementById("tab2").style.display='block';
		   document.getElementById("tab1").style.display='none';
		  }
		</script>
	</head>
	  <table>
	      <tr>
	         <td onclick="tab1()">tab1</td>
	         <td onclick="tab2()">tab2</td>
	      </tr>
	      <tr style="display:block" id="tab1">
	         <td colspan=2>
	         <fieldset>
	         <legend>tab1</legend>
	            <form action="">
	               <table>
	                  <tr>
	                     <th>第一行</th><td><input type="text" name="username"></td> 
	                     <th>第二列</th><td><input type="text" name="pwd"></td>
	                  </tr>
	                  <tr>
	                     <th>第二行</th><td><input type="text" name="username"></td> 
	                     <th>第二列</th><td><input type="text" name="pwd"></td>
	                  </tr>
	                  <tr>
	                     <td><input type="submit" value="确定" /></td> <td><input type="reset" value="取消"/></td> 
	                  </tr>
	               </table>
	            </form>
	            </fieldset>
	         </td>
	      </tr>
	      <tr style="display:none" id="tab2">
	         <td colspan=2>
	          <fieldset>
	         <legend>tab2</legend>
	            <form action="">
	               <table>
	                  <tr >
	                     <th>tab2第一行</th><td><input type="text" name="username"></td> 
	                     <th>第二列</th><td><input type="text" name="pwd"></td>
	                  </tr>
	                  <tr>
	                     <th>tab2第二行</th><td><input type="text" name="username"></td> 
	                     <th>第二列</th><td><input type="text" name="pwd"></td>
	                  </tr>
	                  <tr>
	                     <td><input type="submit" value="确定" /></td> <td><input type="reset" value="取消"/></td> 
	                  </tr>
	               </table>
	            </form>
	            </fieldset>
	         </td>
	      </tr> 
	  </table>
	   	
</html>

 

分享到:
评论

相关推荐

    Android Tab实现源码

    本文将深入解析"Android Tab实现源码",并关注"RaisedCenterTab"这一特定实现方式,它提供了正常、按下以及选中状态的炫酷视觉效果。 首先,我们来理解Android中的Tab布局。TabHost是Android SDK提供的一种原生组件...

    仿微信左右滑动的tab实现

    本项目提供的"仿微信左右滑动的tab实现"是基于Android平台的源码实现,确保能够完美运行,帮助开发者快速构建具有此类交互效果的应用。 首先,让我们了解核心概念和技术: 1. **ViewPager**: Android中的`...

    多种多样的App主界面Tab实现方法

    本文将深入探讨四种常见的App主界面Tab实现方法,帮助开发者和设计师更好地理解并选择适合的Tab设计方案。 ### 1. 固定Tab 固定Tab是最常见的一种实现方式,它始终保持在屏幕底部,通常包含3到5个Tab,每个Tab对应...

    微信小程序练习demo:底部3个tab实现选中时文字和图片改变(源代码+截图)

    微信小程序练习demo:底部3个tab实现选中时文字和图片改变(源代码+截图)微信小程序练习demo:底部3个tab实现选中时文字和图片改变(源代码+截图)微信小程序练习demo:底部3个tab实现选中时文字和图片改变(源代码+截图...

    c# asp .net tab 实现tab功能 源码 希望可以给大家提供帮助

    c# asp .net tab 实现tab功能 源码 希望可以给大家提供帮助 #### or javascript:void(0); return false: a href="####" 点击滚动条不会动 位置不变

    模仿QQ动态特效的tab实现

    本教程将聚焦于如何实现“模仿QQ动态特效的tab实现”,这是一种吸引用户的创新设计,能为应用增添活力与趣味性。 首先,我们来理解QQ动态特效Tab的基本概念。QQ作为一款广受欢迎的即时通讯应用,其界面设计往往引领...

    Android-自定义蚂蜂窝app滑动tab实现波浪线滑动View

    本文将深入探讨如何实现“Android-自定义蚂蜂窝app滑动tab实现波浪线滑动View”的功能,这属于Android开发中的“其它控件”类别。 首先,我们需要理解“蚂蜂窝app滑动tab”的概念。滑动tab通常指的是...

    自绘tab 实现浏览器分页效果

    本示例中的"自绘tab 实现浏览器分页效果"是一个利用MFC(Microsoft Foundation Classes)库在C++/C语言环境下实现的项目。MFC是微软提供的一个面向对象的框架,它简化了Windows应用程序的开发,尤其是涉及到Windows ...

    html tab 实现

    HTML Tab 实现是一种常见的网页设计技术,用于组织和展示页面上的多部分内容,让用户可以在不同的面板之间切换,提高用户体验。在不使用任何JavaScript库或框架的情况下,纯HTML和CSS也能实现基本的Tab组件。本篇...

    用js写的以图片为背景的Tab实现

    本文将深入探讨如何使用JavaScript来实现这一功能,使得Tab在选中和未选中状态显示不同的背景图片。 首先,我们需要在HTML中创建Tab的基本结构。每个Tab可以是一个`&lt;li&gt;`元素,包含一个链接(`&lt;a&gt;`)或者按钮(`...

    微信小程序练习demo:底部3个tab实现选中时文字和图片改变115.zip

    本实践项目,"微信小程序练习demo:底部3个tab实现选中时文字和图片改变115.zip",就专门针对这一功能进行演示和教学。 首先,我们要理解微信小程序的基本架构。微信小程序基于WXML(WeiXin Markup Language)和...

    基于vue多tab页实现

    在Vue.js框架中,多标签页(Tab)的实现是一个常见的需求,特别是在构建复杂的Web应用时,它能够帮助用户组织和切换不同的视图或功能。本教程将详细讲解如何使用Vue.js来创建一个简单的多标签页系统,并提供了一个...

    自定义AppBar、底部Tab结合顶部Tab实现类似头条页面布局、通过TabController定义顶部tab切换

    此资源介绍的相关内容有:自定义AppBar 定义顶部Tab切换 底部Tab结合顶部Tab实现类似头条页面布局 通过TabController定义顶部tab切换 介绍生命周期函数。 适合新手学习移动端开发,也适合老司机参考。

    Android类似新浪微博底部Tab实现代码

    Android类似新浪微博底部、微信底部Tab实现代码

    Android tab的实现

    "Android tab的实现"这个主题主要是关于如何在Android应用中创建和管理Tab来提供多页面导航。通常,我们可以使用Android的TabHost、ActionBar(在API 11及以上版本)或ViewPager配合Fragment来实现Tab功能。下面将...

    android tab 实现

    首先,Android的Tab实现通常采用`TabHost`、`ActionBar`或者`TabLayout`与`ViewPager`的组合。在现代Android开发中,`TabLayout`配合`ViewPager`是推荐的方式,因为它提供了更灵活的定制选项和更好的用户体验。`...

    微信主界面Tab实现方法(Android 安卓技术专辑)

    在Android开发中,微信主界面Tab的实现是一个常见的需求,它涉及到用户界面设计、导航以及交互体验等多个方面。本文将详细解析如何在Android应用中创建类似微信主界面的Tab效果,帮助开发者理解并掌握这一技术。 一...

    TabLayout+ViewPager,自定义tab 实现仿淘宝TabLayout价格动态变换。

    本教程将深入讲解如何利用TabLayout+ViewPager实现自定义tab,以及如何模仿淘宝TabLayout的价格动态变换效果。 首先,我们要了解TabLayout和ViewPager的基本用法。TabLayout是Android Support Library中的一个组件...

    h5实现移动端横向滚动tab,并响应内容

    总结来说,实现移动端横向滚动Tab的关键在于理解并应用CSS的Flexbox布局,配合媒体查询实现响应式设计,以及使用JavaScript处理用户交互和Tab的切换。通过这样的方式,我们可以创建一个既美观又实用的移动端Tab导航...

    Android tab 实现子Activity跳转

    参考了网上大虾们的例子,实现了tab 中的子Activity跳转,并且带有动画效果;这里没有抽取动画作为参数,也可以定制自己的跳转动画;tab bar 的外观可以自己定制,将自带的tab隐藏,控制自定义的view调用tab的动作就...

Global site tag (gtag.js) - Google Analytics