今天花了点时间，设计了一个网页上用的tabview(页签、tabcontrol)效果。个人觉得实现得比较不错，网页元素用得比较少，js代码也比较精练。测试了一下支持IE、FireFox以及chrome。支持同一页面上多处使用。
没有什么过多说的。先看一下效果。
页面中用到一个图片：
页面代码如下：
<!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><title>tabview示例(欢迎访问我的博客：http://wallimn.iteye.com)</title>
<meta http-equiv=content-type content="text/html; charset=GBK">
<script type="text/javascript">
function tabclick(obj){
if(obj.className=='cur')return;
var idx;
for(var n=0; n<obj.parentNode.childNodes.length; n++){
obj.parentNode.childNodes[n].className="";
if(obj==obj.parentNode.childNodes[n])idx=n;
}
obj.className="cur";
var pc = obj.parentNode.nextSibling;
while(pc.nodeType==3)pc=pc.nextSibling;
for(var n=0; n<pc.childNodes.length; n++){
pc.childNodes[n].className="hdn";
}
pc.childNodes[idx].className="";
}
</script>
<style type="text/css">
.debug{
border:1px solid red;
}
.hdn{
display:none;
}
ul.tabbar,ul.tabpage{
list-style-type:none;
margin:0;
font-size:12px;
padding:0;
}
ul.tabbar{
background:url(tabview.gif) repeat-x 0 -68px;
height:34px;
}
ul.tabbar li{
float:left;
width:83px;
height:34px;
line-height:34px;
text-align:center;
background:url(tabview.gif);
cursor:pointer;
cursor:hand;
}
ul.tabbar li.cur{
background:url(tabview.gif) 0 -34px;
}
ul.tabpage{
border-style:ridge;
border-color:#dceefd;
border-width:0 2px 2px 2px;
height:302px;
overflow:hidden;
}
ul.tabpage li{
height:300px;
border-width:0;
overflow-y:auto;
}
</style>
</head>
<body>
<ul class="tabbar">
<li style="margin-left:1em" class="cur" onclick="tabclick(this)">过滤条件</li>
<li onclick="tabclick(this)">排序条件</li>
<li onclick="tabclick(this)">分 组</li>
<li onclick="tabclick(this)">计算字段</li>
</ul>
<ul class="tabpage">
<li>显示过滤条件</li>
<li class="hdn">显示排序条件</li>
<li class="hdn">显示分 组</li>
<li class="hdn">显示计算字段</li>
</ul>
</body>
</html>
03-25进一步简化了代码，仅使用一个js函数；
03-27修正了FF及Chrome浏览器中，对于nextSibling的解释为"\n"，然后才是ul，这个很奇怪。
/***********本人原创，欢迎转载，转载请保留本人信息*************/
作者：wallimn 电邮：wallimn@sohu.com 时间：2009-03-23
博客：
http://wallimn.iteye.com
http://blog.csdn.net/wallimn
网络硬盘：http://wallimn.ys168.com
/***********文章发表请与本人联系，作者保留所有权利*************/
- 大小: 15.3 KB
- 大小: 2.1 KB
分享到：
相关推荐
在Android开发中，为了实现与iOS类似的TabView效果，开发者经常需要进行自定义视图的构建。TabView在iOS中是一种常见的导航模式，通常用于在底部显示多个标签，用户可以通过点击不同的标签切换不同的内容区域。在...
- **自定义视觉效果：** 修改标签页的背景颜色、文字样式、选中状态下的高亮效果等。 - **动画过渡：** 当用户切换标签页时，可以添加平滑的过渡动画，提高用户体验。 - **交互反馈：** 例如，触碰反馈、滑动阻力等...
包含主要内容：tabview实现视图标签页面+窗口分割+treeview显示内容+动态添加控件+在视图里面画图+链表存储+orale数据库（此程序未带，带了你就运行不了了），可以咨询本人，里面有联系方式）+带皮肤文件 ...
在这个特定的场景中，我们关注的是`TabView`在竖直方向上的实现，即标签是垂直排列的，而不是传统上常见的水平排列。这在某些设计中可能是更理想的选择，例如当空间有限或者为了提供独特的用户体验时。 `TabView`的...
该资源是 编程实现不同TabView标签页中任意导航层级视图之间相互跳转>> 博文的配套源代码,博文链接地址如下： https://blog.csdn.net/mydo/article/details/123754090 在本篇博文中，您将学到以下内容: 如何实现...
通过这种方式，我们可以创建一个基本的`TabView`实例。当然，为了提高可维护性和可扩展性，你还可以考虑使用前端框架如Bootstrap或Vue.js，它们提供了内置的`TabView`组件，可以简化开发过程并提供更丰富的功能。 ...
一个VC++的窗体 TabView标签切换 一个VC++的窗体TabView标签切换，使用TAb也是大家比较常见的窗体优化方法，希望这个实用简洁的窗体选项卡能为你的程序界面增光添彩，运行于VC++6.0版本。
### Visual C++中TabView的多种实现方法 #### 概述 在Visual C++中，TabView是一种常见的界面设计模式，用于实现多个视图或页面的便捷切换。本篇文章将详细介绍由周京生撰写的期刊文章《Visual C++中TabView的多种...
【标题】"用VC实现的tabview" 是一个基于Microsoft Visual C++（VC++）开发的项目，旨在创建一个TabView组件，它允许在单一视图内嵌套多个子窗体，提供类似浏览器标签页的功能。这样的设计可以有效利用屏幕空间，...
在Android开发中，`AndroidTabView`是一种常见的用户界面组件，用于实现多页面间的切换，类似于浏览器中的标签页。这种视图通常与`ViewPager`配合使用，为用户提供平滑的左右滑动体验，同时在顶部展示一个可点击的...
"Tabview实现源码 MFC"是关于如何使用MFC来创建一个带有标签控件（TabCtrl）的用户界面，使得用户可以通过不同的标签页在多个视图（View）之间进行切换。这种设计常见于许多应用中，如设置窗口、多文档界面（MDI）...
在本示例"多选TabView的实现"中，我们将会探讨如何通过重写`UITableViewCell`的布尔值属性来扩展`UITableView`，使其具备多选功能。 首先，我们要创建一个自定义的`UITableViewCell`子类，比如叫做`...
本Demo实现了仿IOS的TabView的顶部悬停布局、但是实现的原理不是用的Android的ListView、也不是用的Android中ExpandableListView、是用的LinearLayout嵌入的方式实现的、且支持多个、效果还是不错的
在iOS开发中，`TabView`通常指的是SwiftUI框架中的`TabView`组件，它用于构建多页面的应用界面，每个页面通常对应一个底部标签。`TabView`是苹果在iOS 13中引入的新特性，它极大地提高了用户体验，因为用户可以轻松...
TabBar组件是React-Native中用于实现Tab导航的关键组件，通常结合Navigator或其他导航库一起使用。在本例中，我们将使用`react-navigation`库，这是一个强大的React-Native导航解决方案，提供了多种导航类型，包括...
6. **自定义样式和行为**：根据需求，可能需要调整Tab控件的外观，例如设置Tab位置（顶部、底部、左侧、右侧）、间距、字体样式等，并实现特定的用户交互效果，如拖放Tab页。 7. **测试和优化**：完成基本功能后，...
四、自定义TabView的实现 在自定义TabView中，开发者可能需要实现以下功能： - 绘制不同状态的Tab，如选中和未选中状态。 - 实现点击事件监听，切换Tab的选中状态。 - 动态更新Tab的内容，如文字或图标。 五、优化...
这个组件的亮点在于其无代码（No-Code）特性，这意味着开发者无需编写复杂的JavaScript或HTML代码就能实现多标签页的交互效果。用户只需要在网页中引入必要的资源，就可以轻松创建和管理标签。 标签"HtmlControl"...