直接上代码!
<html>
<head>
<title>tab控件</title>
<style type="text/css">
div.tab_control{
position:relative;
margin:0 auto;
width:300px;
}
/** 定义tab选项卡的样式 */
div.tab_control ul{
list-style:none;
margin:0px 1px;
padding:0px 0px 20px 0px;
line-height:0px;
border-bottom:1px solid #8db2e3;
}
div.tab_control ul li{
float:left;
overflow:hidden;
display:inline-block;
color:black;
background:#e4edf3;
cursor:pointer;
width:90px;
text-align:center;
line-height:19px;
margin:0px 1px 0px 1px;
border:1px solid #8db2e3;
padding:0px;
font-family:宋体;
font-size:12px;
}
div.tab_control ul li.selected {
background:white;
border-bottom:1px solid white;
}
div.tab_control div.tab_content{
display:block ;
overflow:hidden;
border:1px solid #8db2e3;
border-top:0px;
padding:0px;
margin:0px 1px 1px 1px;
clear:both;
background:white;
}
</style>
<script language="javascript">
//显示标签页
function showTab(liobj, liname) {
if (liname.indexOf(' selected') !== -1) return; // 没有改变选项
var tag = liobj.parentNode.childNodes;
for (var i = 0; i < tag.length; i++) {
var item = tag[i];
if (item.nodeType === 1) {
if (item.className.indexOf(' selected') !== -1) {
item.className = item.className.replace(' selected', '');
document.getElementById(item.className).style.display = 'none';
}
}
}
document.getElementById(liname).style.display = 'block';
liobj.className += ' selected';
}
</script>
</head>
<body>
<div class="tab_control">
<ul>
<!-- class 关联对应的编号 -->
<li class="li_1 selected" onmousedown="javascript:showTab(this, this.className);">个人用户登录</li>
<li class="li_2" onmousedown="javascript:showTab(this, this.className);" >企业用户登录</li>
<li class="li_3" onmousedown="javascript:showTab(this, this.className);" >其他用户登录</li>
</ul>
<div class="tab_content">
<div id="li_1">123</div>
<div id="li_2" style="display:none;">456</div>
<div id="li_3" style="display:none;">789</div>
</div>
</div>
</body>
</html>
分享到:
相关推荐
YdKit是一个功能丰富的Android通用组件。 —轻量级的Android日志系统。 —简洁但不简单的Android网络组件库。 —高性能Android缓存框架。 —简洁易用的Android多线程操作框架。 —简洁易用的Android Crash日志...
基本不用对原有程序进行修改,便可将原有程序进行整合.5)可视化编辑,全新的Menu和Tab控件.支持拖拉式编辑.6)统一的事件日志管理,所有登陆操作都有安全记录.7)每个模块的每个栏目对应一个目录, 栏目的权限默认抽象分为...
ASP.NET通用权限管理系统1.0.4源码 功能 其主要的功能就是,进行后台管理模块整合. 1)其可以支持多个应用,多个模块的权限管理. 2)支持Access和MsSql200/2005. 3)采用角色来进行权限的授权,每个用户...
5)可视化编辑,全新的Menu和Tab控件.支持拖拉式编辑. 6)统一的事件日志管理,所有登陆操作都有安全记录. 7)每个模块的每个栏目对应一个目录, 栏目的权限抽象分为(查看/新增/修改/删除/排序/打印/备用A/备用8).目录里有...
5)可视化编辑,全新的Menu和Tab控件.支持拖拉式编辑. 6)统一的事件日志管理,所有登陆操作都有安全记录. 7)每个模块的每个栏目对应一个目录, 栏目的权限默认抽象分为(查看/新增/修改/删除/排序/打印/备用A/备用B),每...
7)每个模块的每个栏目对应一个目录, 栏目的权限默认抽象分为(查看/新增/修改/删除/排序/打印/备用A/备用B),每栏目权限可最多扩展为20个自定义权限. 8)可通过目录中web.config来进行目录文件权限配置,可直接将某个...
FCKeditor控件的可配置属性不多,且配置后只能作用于一个单一实例。实际上,需要对FCKeditor编辑器文件组中的通用配置文件/fckconfig.js和ASP.NET专用文件上传管理代码文件/editor/filemanager/connectors/aspx/...
其主要的功能就是,进行后台权限管理模块整合. 1)其可以支持多个应用,多个模块的权限管理. 2)支持Access和MsSql...5)可视化编辑,全新的Menu和Tab控件.支持拖拉式编辑. 6)统一的事件日志管理,所有登陆操作都有安全记录.
1)其可以支持多个应用,多个模块的权限管理. 2)支持Access和MsSql200/2005以及Oracle9i以上数据库. ...5)可视化编辑,全新的Menu和Tab控件.支持拖拉式编辑. 6)统一的事件日志管理,所有登陆操作都有安全记录
5)可视化编辑,全新的Menu和Tab控件.支持拖拉式编辑. 6)统一的事件日志管理,所有登陆操作都有安全记录. 7)每个模块的每个栏目对应一个目录, 栏目的权限抽象分为(查看/新增/修改/删除/排序/打印/备用A/备用 8).目录里...
带详细说明及vb例子代码(17KB)<END><br>69,tabstatus.zip 在多文档界面的状态条上放一个TAB控件,可以在状态条上直接激活或最大化各个子窗口。(62KB)<END><br>70,pushpin.zip 这个例子演示图钉按纽的实现(就像...
167.如何解决ADO.NET访问ACCESS数据库出现“操作必须使用一个可更新的查询”的问题 168.如何从EXCEL文件中读取数据 169.如何备份和恢复数据库 第9章 ASP.NET安全策略 第10章 常用功能及函数集 180.如何在ASP...
如何解决ADO.NET访问ACCESS数据库出现“操作必须使用一个可更新的查询”的问题 168.如何从EXCEL文件中读取数据 169.如何备份和恢复数据库 第9章 ASP.NET安全策略 第10章 常用功能及函数集 180....
1.1.5 Tab控件、时间控件、列表控件和树控件范例 1.2 对话框程序设计 1.3 本章小结 第2章 文档应用程序设计 2.1 菜单程序设计 2.1.1 静态菜单设计 2.1.2 动态菜单设计 2.2 工具栏和状态栏程序设计 ...
1.1.5 Tab控件、时间控件、列表控件和树控件范例 1.2 对话框程序设计 1.3 本章小结 第2章 文档应用程序设计 2.1 菜单程序设计 2.1.1 静态菜单设计 2.1.2 动态菜单设计 2.2 工具栏和状态栏程序设计 ...
9) 可写控件检测到非法输入后应给出说明并能自动获得焦点。 10) Tab键的顺序与控件排列顺序要一致,目前流行总体从上到下,同时行间从左到右的方式。 11) 复选框和选项框按选择几率的高底而先后排列。 12) 复选框...
1.1.5 Tab控件、时间控件、列表控件和树控件范例 1.2 对话框程序设计 1.3 本章小结 第2章 文档应用程序设计 2.1 菜单程序设计 2.1.1 静态菜单设计 2.1.2 动态菜单设计 2.2 工具栏和状态栏程序设计 ...
制作一个简单的多页Tab功能 一完美的关于请求的目录不存在而需要url重写的解决方案! 在C#中实现MSN消息框的功能 XmlHttp实现无刷新三联动ListBox 鼠标放在一个连接上,会显示图片(类似tooltip) 使用microsoft.web.ui...
基本不用对原有程序进行修改,便可将原有程序进行整合. 5)可视化编辑,全新的Menu和Tab控件.支持拖拉式编辑. 6)统一的事件日志管理,所有登陆操作都有安全记录. 7)每个模块的每个栏目对应一个目录, 栏目的权限...