`

简单选项卡制作方式

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function setThisDisplay(id){
		try{
			var tabItem=document.getElementById(id);
			var btnItem=document.getElementById("btn"+id);

			var tabArr=["EmployeeInfo","OrganizationInfo","SysInfo","RoleInfo","PersonnelInfo"];
			for(var i=0;i<tabArr.length;i++){
					if(tabItem.id!=tabArr[i]){
						document.getElementById(tabArr[i]).style.display='none';
					}else{
						tabItem.style.display='';	
					}
			}
			
			var btnArr=["btnEmployeeInfo","btnOrganizationInfo","btnSysInfo","btnRoleInfo","btnPersonnelInfo"];
			
			for(var i=0;i<btnArr.length;i++){
				if(btnItem.id==btnArr[i]){	
					btnItem.bgColor='white';
				}else{
					document.getElementById(btnArr[i]).bgColor='';	
				}
			}
			
		}catch(argument){
				
		}
}
</script>
<style type="text/css">
<!--
.tabTitle {
	text-align: center;
	cursor:hand;
}
-->
</style></head>

<body leftmargin="0" bottommargin="0" rightmargin="0" topmargin="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0" height="100%">
  <tr>
    <td height="51" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr  bgcolor="lightgrey" >
        <td height="50">&nbsp;&nbsp;&nbsp;<font size=3><b>张三
        </b></font>
        <br />
        &nbsp;&nbsp;&nbsp;添加/修改人员信息
        </td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="35"  valign="top" bgcolor="F0F0F0">
    <br />
    <table width="100%" border="0" cellpadding="0" cellspacing="0" height="35">
      <tr >
        <td width="5%">&nbsp;</td>
        <td  id="btnEmployeeInfo" onclick="setThisDisplay('EmployeeInfo')" align="center" nowrap bgcolor="white" class="tabTitle">基本信息</td>
        <td  id="btnOrganizationInfo" onclick="setThisDisplay('OrganizationInfo')"  align="center" nowrap class="tabTitle">组织结构</td>
        <td  id="btnSysInfo" onclick="setThisDisplay('SysInfo')"  align="center" nowrap class="tabTitle">系统设置</td>
        <td  id="btnRoleInfo" onclick="setThisDisplay('RoleInfo')"  align="center" nowrap class="tabTitle">角色和权限</td>
        <td  id="btnPersonnelInfo" onclick="setThisDisplay('PersonnelInfo')"  align="center" nowrap class="tabTitle">人事档案</td>
        <td width="40%">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr bgcolor="F0F0F0">
  <td height="370" valign="top">
  <!--基本信息-->
  <table id="EmployeeInfo" width="95%" height="333" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="white" >
    <tr>
      <td>基本信息</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
   <!--组织结构-->
  <table id="OrganizationInfo" width="95%" height="333" border="0" align="center" cellpadding="0" cellspacing="0"  style="display:none;" bgcolor="white" >
    <tr>
      <td>组织结构</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
   <!--系统设置-->
  <table id="SysInfo" width="95%" height="333" border="0" align="center" cellpadding="0" cellspacing="0"  style="display:none;" bgcolor="white" >
    <tr>
      <td>系统设置</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
   <!--角色与权限-->
  <table id="RoleInfo" width="95%" style="display:none;" height="333" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="white">
    <tr>
      <td>角色与权限</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
    <!--人事档案-->
  <table id="PersonnelInfo" width="95%" style="display:none;" height="333" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="white">
    <tr>
      <td>人事档案</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  </td></tr>
  <tr bgcolor="F0F0F0"  height="135">
  <td></td>
  </tr>
</table>
</body>
</html>

 

分享到:
评论

相关推荐

    SimpleTabGrouping-crx插件

    简单的选项卡分组是您可以将选项卡添加到另一个选项卡管理扩展名并将其添加到组中。许多其他扩展只能将窗口中的所有选项卡组合到一个组中。[如何使用]· 基本的1.首先,创建一个小组以单独的选项卡。如果要创建有关...

    简约齐全的星空后台模版

    素材描述:页面基础排版(flex/column-count)布局、按钮系列组、表格系列、进度条、分页、表单、 文本编辑器、统计图表、TAB选项卡、CSS3基础动画及第三方弹层插件等常见页面使用元素。 原始模板为php文件格式,css...

    flash基本应用和简单动画制作

    “样式”下拉列表中有“星形”和“多边形”两个选项,分别用于制作星形和多边形。 “边数”文本框用于设置星形和多边形的边数,直接在文本框中输入一个介于3到32之间的数字即可。 “星形顶点大小”文本框用于指定星...

    中文word2007基础培训教程.pptx

    您可以单击"开始"选项卡查看格式选项,但还有一种更快捷的方法。 中文word2007基础培训教程全文共120页,当前为第8页。 浮动工具栏 有些格式命令非常有用,您希望无论执行任何操作时都可以使用它们。 通过拖动鼠标...

    新标签|单面「New Tab | Simplex」「New Tab - Simplex」-crx插件

    一个丰富的新的默认选项卡为高效和简单的界面。 一个带有手动快速拨号和书签列表的新选项卡,可以立即访问相应的链接。 此外,还包括一个“提醒”选项卡,用于记住当天最重要的任务。 制作Simplex的唯一目的是以积极...

    New Tab - Simplex-crx插件

    语言:English广泛的“新默认选项卡”,可提供高效且简单的界面。一个带有手动快速拨号和书签列表的新选项卡,可以立即访问相应的链接。此外,还包括一个“提醒”选项卡,用于记住当天最重要的任务。制作Simplex的...

    构造函数+原型模式构造js自定义对象(最通用)

    [removed] /* * 组合模式: 构造函数模式+原型模式 这种方式是javascript中最通用的创建对象的方式 变量类型属性:用构造函数传递 函数类型属性:用原型模式声明 */ function Student(name,age){ this.name=name;...

    ppt制作培训教程.doc

    PPT制作培训教程 目标:教您如何将已有教案转化为演示文稿,并且详细讲述了幻灯片的制作方法和一 些制作技巧,您可以充分发挥POWERPOINT的特点,把课讲得更生动、更活泼、更明白。 实例:下面给出了利用教案制作好的...

    计算机应用基础2详述.pptx

    2.1 制作培训通知 选择的方法很简单: 1)使用鼠标选中: 从文本起始位置拖拽到终止位置,中间的文本会被选中 将光标置于起始位置,按住Shift,再点击终止位置,效果同 按住Ctrl的同时单击句中任意位置,可以选中一...

    safari-google-buttons:简单的Safari扩展程序可打开Gmail或Google日历

    如果您已经打开了Web应用程序,它将随即切换到选项卡,否则,它将打开一个新选项卡并加载服务。 为什么? 我曾多次尝试使用Chrome,但是(由于各种原因)我总是回到Safari。 我唯一真正缺少的是“固定”标签。 ...

    一卡通软件

    必选项 人员编号、姓名、部门三项信息为必选项,导入数据前应准备的表格也需至少包含这四类信息对应的列。 起始行 导入前还需确认表格文件内信息起始行,假设表格内含有表头等其它非相关信息的行,需在资料是从第___...

    答卷设计软件(SheetDesign)是答卷网开发的一款永久免费的考试答卷、考试答题卡设计软件。

    SheetDesign 简单易用,让普通用户不需要专业的知识也能设计制作出正规、漂亮的答卷。软件现默认支持A4,A3两种纸张类型的设计。 SheetDesign 现在主要包括答卷卷头设计(考号支持涂点和条形码两种方式),客观题...

    电脑高手必备 Windows系统35招实用技巧

    选择“快捷方式”选项卡,接着,单击“更改图标”按钮。在以下文件中查 找图标文本框中,输入Shell32.dll,单击“确定”。从列表中选择所需图标 ,并单击“确定”。你还可为快捷方式指定一组快捷键,比如“Ctrl+...

    Winform 界面设计 视频教程

    TabControl 选项卡控件 菜单和工具栏: ContextMenuStrip 右键菜单 MenuStrip 菜单控件 StatusStrip 状态栏控件 ToolStrip 工具栏控件 ImageList 图片集合 Timer 时间控件 对话框: FolderBrowserDialog ...

    Recently Closed Tabs-crx插件

    不仅导致它由我们制作:-)这个小型扩展为您提供了一种简单的方法来重新打开之前关闭的一些网页。此外,您能够配置选项,因此影响弹出窗口中最近关闭的选项卡在弹出窗口中显示的方式,甚至可以过滤掉页页,您不想重新...

    硕士生,博士生论文排版技巧方法

    在“工具︱选项”的“视图”选项卡可以设置域底纹的显示方式。 四.参考文献的编号和引用 参考文献的标注本不是一件麻烦的事情,但是对参考文献编号后就成了一件麻烦的事情,产生的问题和图表公式编号的问题是一样...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    简单jquery选项卡插件下载(支持鼠标移上切换、点击切换、Ajax方式切换等) 9.漂亮Tab插件之jQuery自动切换轮播Tab选项卡示例代码 10.实用jquery+CSS实现流畅tab切换效果(Coda-Slider 1.1.1)插件 11.实用jquery...

    TabSorter-crx插件

    此扩展程序以最佳方式对浏览器选项卡进行排序。 你有很多标签打开 - 可能太多,你不能阅读每个标签上的文字。...这非常简单,不会存储或传输任何数据 - 只需对选项卡进行排序并制作窗口即可。 支持语言:English

Global site tag (gtag.js) - Google Analytics