今天花了点时间，设计了一个网页上用的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
分享到：
相关推荐
通过这种方式，我们可以创建一个基本的`TabView`实例。当然，为了提高可维护性和可扩展性，你还可以考虑使用前端框架如Bootstrap或Vue.js，它们提供了内置的`TabView`组件，可以简化开发过程并提供更丰富的功能。 ...
在传统Web前端开发中，我们可能习惯于使用CSS的position属性中的fixed来实现固定定位效果。但在React Native中，position属性只提供了absolute和relative两种布局方式，并没有提供fixed属性，这就意味着传统的Web...
通过这个示例，我们可以看到使用YUI的TabView组件来实现标签浏览效果是非常简单和直观的。只需要简单的HTML结构和少量的JavaScript代码即可完成。此外，YUI还提供了丰富的定制选项和事件处理机制，使得开发者可以...
"Shopper_Counter_TabView" 是一个基于JavaScript的项目，主要目标是实现一个购物者计数器的Tab视图。这个项目可能是一个电子商务网站或应用的一部分，用于追踪和展示不同商品分类下的用户浏览量或者购买行为。让...
TabView通常用于实现多标签页的效果，让用户可以在不同的内容之间切换。在Android中，我们可以使用`android.widget.TabHost`或`androidx.viewpager.widget.ViewPager`配合`androidx.fragment.app.Fragment`来实现这...
4. **导航组件**：包括菜单（Menu）、面包屑（Breadcrumbs）、侧边栏（Sidebar）、标签页（TabView）等，帮助用户在应用中导航。 5. **对话组件**：如Dialog，用于弹出式对话框，常用于提示、确认或展示更多信息。 ...
5. **CSS样式和动画**：YUI提供了`YUI.Style`和`Y.Anim`模块，用于动态修改元素的CSS属性和创建复杂的动画效果。这对于构建具有视觉吸引力的应用非常有用。 6. **数据和JSON**：`Y.JSON`模块提供了将JavaScript对象...