<html>
<head>
<meta content="text/html; charset=UTF-8;"/>
<style type="text/css">
/*------------tab----------*/
.tabItemContainer{
height:30px;
overflow:hidden;
background:#F7F7F7 url(dot.gif) bottom repeat-x;
margin-bottom:6px;
}
.tabItemContainer .tab,
.tabItemContainer .blank{
float:left;
height:24px;
line-height:24px;
margin:0;
margin-right:6px;
margin-top:6px;
overflow:hidden;
cursor:pointer;
}
.tabItemContainer .blank{
width:48px;
}
.tabItemContainer .tab div{
float:left;
height:24px;
}
.tabItemContainer .selected{
}
.tabItemContainer .tab_left,
.tabItemContainer .selected .tab_left{
background:url(tab_on_left.gif) no-repeat bottom right;
width:5px;
}
.tabItemContainer .tab_middle,
.tabItemContainer .selected .tab_middle{
padding:0 16px;
}
.tabItemContainer .selected .tab_middle{
background:url(tab_on_center.gif) repeat-x bottom;s
padding:0 16px;
}
.tabItemContainer .tab_right,
.tabItemContainer .selected .tab_right{
background:url(tab_on_right.gif) no-repeat bottom left;
width:5px;
}
.tabItemContainer .tab_left{
background:url(tab_off_left.gif) no-repeat bottom right;
}
.tabItemContainer .tab_middle{
background:url(tab_off_center.gif) repeat-x bottom right;
}
.tabItemContainer .tab_right{
background:url(tab_off_right.gif) no-repeat bottom left;
}
/*------------tab end----------*/
</style>
<script type="text/javascript">
//改变tab样式，
function changeTab(tabIndex){
var tabIndexVal = parseInt(tabIndex);
//var tabCount=jQuery('#tabCount').val();
for(var i=1;i<=3;i++){
//改变选项卡样式
if(tabIndexVal==i){
document.getElementById('tab'+i).className="tab selected";
document.getElementById('d'+i).style.display="block";
//jQuery('#tab'+i).removeClass("tab");
//jQuery('#tab'+i).addClass("tab selected");
}else{
document.getElementById('tab'+i).className="tab";
document.getElementById('d'+i).style.display="none";
//jQuery('#tab'+i).removeClass("tab selected");
//jQuery('#tab'+i).addClass("tab");
}
}
//submit2Times(tabKey);
}
</script>
</head>
<body>
<div class="tabItemContainer">
<div id="tab1" class="tab selected">
<div class="tab_left"></div>
<div class="tab_middle">
<a href="javascript:changeTab(1);">
first tab page
</a>
</div>
<div class="tab_right"></div>
</div>
<input id="first" type="hidden" value="asdf"/>
<div id="tab2" class="tab">
<div class="tab_left"></div>
<div class="tab_middle">
<a href="javascript:changeTab(2);">
second tab page
</a>
</div>
<div class="tab_right"></div>
</div>
<input id="secinput" type="hidden" value="asdf"/>
<div id="tab3" class="tab">
<div class="tab_left"></div>
<div class="tab_middle">
<a href="javascript:changeTab(3);">
first tab page
</a>
</div>
<div class="tab_right"></div>
</div>
<input id="third" type="hidden" value="asdf"/>
</div>
<div id="d1" style="float:left;width:100%; height:500px; background-color:#891989">
first
</div>
<div id="d2" style="display:none; float:left;width:100%; height:500px; background-color:#893986">
second
</div>
<div id="d3" style="display:none; float:left;width:100%; height:500px; background-color:#896983">
thrid
</div>
</body>
</html>
分享到：
相关推荐
基于jquery的tabpanel，支持动态添加，支持...这个是我在网上找到一个原始的版本，然后修改的，有详细注释，写了11个使用例子，基本涵盖了该组件的功能。源代码也比较好看了，很清晰。 有兴趣的欢迎交流,qq：505074122
数年收藏的十几款javascript选项卡控件。
React咏叹调 寻求共同维护者！ 这个项目的持续发展将需要一个或多个专门的共同维护者（或叉）的工作。 如果您有兴趣，请在发表评论...该库的模块化方法意味着您最好使用诸如Browserify或Webpack之类的模块捆绑系统将其
Edit Grid限制编辑 ExtJS 4 DirectStore post参数的变化以及应对方法 ExtJS 4 实例之数据包 ExtJS 4中动态加载的路径设置 ...技巧：Javascript使用隐藏的new来创建对象 禁止页面全选复制，兼容多种浏览器
Spark框架 Spark框架是用于现代Web开发的全新JavaScript框架。 它专注于创建基于View的组件，旨在进行测试驱动并提供详细文档。 Spark受启发很大，它建立在Google强大的Closure库和强大的Closure工具之上。未来的...
Webcomp类：提供了date、popmenu、panel、tabpanel、tree等高级控件； RichClient类：提供了datacell、comboselect等ajax控件。 Javascript api EOS RichWeb提供了字符串处理、日期处理、dom操作、ajax操作等js...
可以参照上面的演示,全部采用javascript+Ajax来实现的,包括工具栏，可编辑的树，实现多文件编辑Tabpanel,以及右键菜单的实现和相关事件驱动的处理
从页面布局和使用的控件TextBox,Combox，Button，ToolBar，StateBar，Panel，TabPanel，ExplorerBar,MenuBar,PictureBox都用统一的样式非常方便的配置，基本不需要额外美工处理，同时支持ajax无刷新效果。
标签面板 一个简单的 chrome 扩展来浏览选项卡。
5.1.6 Ext.TabPanel 5.2 信息提示框组件 5.2.1 Ext.MessageBox简介 5.2.2 Ext.MessageBox.alert() 5.2.3 Ext.MessageBox.confirm() 5.2.4 Ext.MessageBox.prompt() 5.2.5 Ext.MessageBox.wait() ...
5.1.6 Ext.TabPanel 5.2 信息提示框组件 5.2.1 Ext.MessageBox简介 5.2.2 Ext.MessageBox.alert() 5.2.3 Ext.MessageBox.confirm() 5.2.4 Ext.MessageBox.prompt() 5.2.5 Ext.MessageBox.wait() ...
< Tabs> < TabList> < Tab> One </ Tab> < Tab> Two </ Tab> < Tab> Three </ Tab> </ TabList> < TabPanel> < h2> Panel One </ h2> </ TabPanel> < TabPanel> < h2> Panel Two </ h2> </ TabPanel> < TabPanel>
Ext官方网站+中文教程 无论你是Ext库的新手，抑或是想了解Ext的人，本篇文章的内容都适合你。...TabPanel基础 94 Step 1: 创建 HTML 骨架 94 Step 2: Ext结构的构建 96 Step 3: 创建Tab控制逻辑 97
1． 较上一版本，增加一个frameset模块，是基于 iejoyswebos桌面的程序框架模块，可以用它来做桌面程序集合应用，它也是动态加载所集合模块JS包和CSS包，并且与桌面加载不冲突，它所加载的功能是以tabpanel的模式...
Javascript中的作用域（scope） 13 事前准备 13 定义 13 正式开始 14 window对象 14 理解作用域 15 变量的可见度 15 EXT程序规划入门 16 事前准备 16 需要些什么？ 16 applayout.html 16 applayout.js 17 公开Public...
这是我花费数月写的关于Extjs的原创教程，共29个章节。下面是目录： 目 录 1 第一章：序 6 第二章：准备与资源 9 一、下载 9 二、拦路虎 9 三、布署环境 11 四、SpketIDE 12 五、资源 16 六、小结 16 第三章：Ext ...
import { Tab , Tabs , TabList , TabPanels , TabPanel } from '@starnavi/react-tabs' ; export default ( ) => ( < Tab> First Tab < / Tab > < Tab> Second Tab < / Tab > < / TabList > < ...
<script type="text/javascript" src="ext-2.3.0/adapter/ext/ext-base.js"> <!-- ENDLIBS --> <script type="text/javascript" src="ext-2.3.0/ext-all.js"> <script type="text/javascript" src="js/...
85 Element：Ext的核心 86 获取多个DOM的节点 87 响应事件 87 使用Widgets 88 編輯 使用Ajax 91 TabPanel基础 94 Step 1: 创建 HTML 骨架 94 Step 2: Ext结构的构建 96 Step 3: 创建Tab...
85 Element：Ext的核心 86 获取多个DOM的节点 87 响应事件 87 使用Widgets 88 編輯 使用Ajax 91 TabPanel基础 94 Step 1: 创建 HTML 骨架 94 Step 2: Ext结构的构建 96 Step 3: 创建Tab...