<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>
分享到：
相关推荐
你可以通过 `add()` 方法动态添加新的标签页，或者使用 `remove()` 方法移除已存在的标签页。例如： ```javascript // 添加新标签页 tabPanel.add({ title: '角色管理', // 可能对应于roleManager.js中的内容 })...
ExtJS的TabPanel是其组件库中的一个核心组件，用于创建具有多个标签页的应用界面，每个标签页可以承载不同的内容。...在实际开发中，结合源码分析和工具使用，我们可以进一步优化TabPanel的性能和交互效果。
### ExtJS 4.2.1 TabPanel 刷新与关闭标签功能详解 #### TabPanel 组件简介 在ExtJS框架中，`TabPanel`组件是一个非常实用且强大的UI控件，它允许用户在一个界面上组织多个相关的视图或面板，并通过标签页的形式...
此外，设置tabpanel当前活动页签的样式还可以使用Extjs的JavaScript API。例如，可以使用 `tabpanel.getActiveTab()` 方法来获取当前活动页签，然后使用 `tab.setStyle()` 方法来设置该页签的样式。这种方法可以提供...
本实例探讨的是如何使用jQuery来实现一个功能丰富的TabPanel选卡结合右键菜单的交互功能，这对于创建高效的多页面视图应用是非常实用的。 首先，TabPanel是一种常见的UI组件，它允许用户在一个固定的区域中通过不同...
在EXT JS这个强大的JavaScript库中，`TabPanel`是一个核心组件，用于实现多标签页界面。本篇文章将深入探讨如何在EXT JS的`TabPanel`中实现动态页面加载，这在构建可扩展且高效的Web应用时非常关键。通过动态加载，...
基于jquery的tabpanel，支持动态添加，支持...这个是我在网上找到一个原始的版本，然后修改的，有详细注释，写了11个使用例子，基本涵盖了该组件的功能。源代码也比较好看了，很清晰。 有兴趣的欢迎交流,qq：505074122
`jerichotab`这个文件名可能是与一个叫做Jericho Tab Panel的库或者组件相关的，这可能是一个JavaScript库或者Java Swing组件，用于在Web或桌面应用中实现TabPanel效果。Jericho Tab Panel可能提供了丰富的自定义...
首先，我们看到有两个JavaScript文件，TabPanel.js和TabPanel2.js。TabPanel.js可能是基础的TabPanel类，而TabPanel2.js可能包含了垂直页签的扩展或改进。在ExtJS中，扩展通常用于添加新功能或改变现有组件的行为。...
【描述】提到的是使用 jQuery 来实现 TabPanel 的一个实例，jQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画以及Ajax交互等任务，使得创建动态网页变得更加简单。在这里，jQuery 被...
6. **工具应用**：标签还提到了“工具”，这可能是指使用某些开发工具或库来辅助`TabPanel`的开发，比如使用IDE的插件进行布局设计，或者使用jQuery、Bootstrap等库来快速构建`TabPanel`。 7. **可访问性和响应式...
在这个“javascript+css+tabpanel的实现”中，我们将深入探讨如何使用HTML、JavaScript和CSS来创建一个功能完备且交互友好的Tab Panel系统。 首先，HTML是构建页面结构的基础。Tab Panel的基本HTML结构通常包括一个...
EXTJS的tabpanel是其组件库中的一个重要组成部分，用于创建具有多个选项卡的用户界面，每个选项卡代表一个独立的视图或...正确理解和使用tabpanel的激活方法以及注意事项，将有助于提升EXTJS应用的用户体验和功能性。
### Ext中的tabpanel关闭后再打开不显示的问题 在Ext框架中，`TabPanel`是一个非常重要的组件，用于实现页面中的多标签页功能。然而，在实际应用过程中可能会遇到一个常见问题：当某个标签页被关闭后，如果尝试重新...
这可能涉及到JavaScript或者特定框架（如jQuery UI、ExtJS、AngularJS等）的API使用。遗憾的是，没有提供具体的博文内容，我们只能进行一般性的讨论。 在源码层面，`TabPanel`的实现可能会涉及以下几个关键点： 1....
而 Ext 是一个JavaScript库，提供了丰富的用户界面组件，包括TabPanel，它被广泛用于组织和展示多个相关的页面或内容区域。 首先，让我们了解什么是TabPanel。在Web UI设计中，TabPanel 是一种常见的布局元素，它将...
EXTJS是一种基于JavaScript的富客户端应用开发框架，它主要用于构建数据驱动、用户界面丰富的Web应用程序。EXTJS提供了大量的组件和布局模式，使开发者能够轻松创建出功能强大的网页应用。在这个"360界面"项目中，...
实现`tabpanel`功能可以使用HTML5的`<tabs>`元素，配合JavaScript库（如jQuery UI，Angular Material，Bootstrap等）或者现代框架（如React，Vue，Angular）的特定组件。这些库和框架提供了方便的API和样式，以实现...
通过以上步骤，我们不仅学习了如何在ExtJS 4.2中根据不同数值设置TabPanel中GridPanel行的背景颜色，而且还了解了如何利用CSS和JavaScript结合来实现灵活多变的界面效果。这种方法不仅适用于数值类型的数据，还可以...
`js tabpanel` 指的是使用 JavaScript 技术实现的动态标签页功能，使得用户交互更加直观和高效。下面将详细探讨 `js tabpanel` 的实现原理、常见功能和应用实例。 首先，`js tabpanel` 的核心功能是提供一个容器，...