文章分类 Classification
TAB标签选项卡
稿件来源: 阳光企业网站管理系统 撰稿作者: 太阳光 发表日期: 2012-03-26 阅读次数: 114 查看权限: 游客查看
因小案例需要制作了一个tab标签。
在网页制作中常常需要一些tab标签显示内容。在网上看了一下大部分都需要大量的CSS，HTML甚至大量难懂javascript代码实现。于是自己动手简单写了一个简易的tab标签。不使用ID标签，以致可循环复制使用。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TAB标签选项卡</title>
</head>
<body>
<style type="text/css">
.art_div{
width:380px;
height:200px;
margin-left:6px;
float:left;
font-size:12px;
border:1px solid #C7C7CD
}
.tab_ul{margin:0;padding:0;height:25px;}
.tab_ul li{
float: left;
width: 126px;
cursor: pointer;
height:23px;
font-weight:bold;
color:#666;
line-height:23px;
overflow:hidden;
text-align:center;
border-left:1px #C7C7CD solid;
list-style-type: none;
}
.active{ background:url(http://down.scscms.com/pictrue/tab_bg.gif) left -25px repeat-x;border-bottom:1px #fff solid;}
.normal{ background:url(http://down.scscms.com/pictrue/tab_bg.gif);border-bottom:1px #C7C7CD solid;}
.list{margin:4px}
</style>
<script type="text/javascript">
function nTabs(obj,n){
if(obj.className == "active")return;
var tabList =obj.parentNode.getElementsByTagName("li");
var div=obj.parentNode.parentNode.getElementsByTagName("span");
for(i=0; i <tabList.length; i++){
if (i == n){
obj.className = "active";
div[i].style.display = "block";
}else{
tabList[i].className = "normal";
div[i].style.display = "none";
}
}
}
</script>
<div class="art_div">
<ul class="tab_ul">
<li style="border-left:none" class="active" onclick="nTabs(this,0)">阳光系统</li>
<li class="normal" onclick="nTabs(this,1)">SCSCMS系统</li>
<li class="normal" onclick="nTabs(this,2)">太阳光</li>
</ul>
<span style="display:">
<div class="list"><a href="http://www.scscms.com/article/2010-3/1210243622.html" target='_blank'>开机宽带自动登陆</a></div>
<div class="list"><a href="http://www.scscms.com/article/2010-3/1117384361.html" target='_blank'>点击图片立刻下载此图片</a></div>
<div class="list"><a href="http://www.scscms.com/article/2010-3/1117333604.html" target='_blank'>js幻灯片播放器</a></div>
<div class="list"><a href="http://www.scscms.com/article/2010-3/1117303603.html" target='_blank'>js基础javascript 入门</a></div>
</span>
<span style="display:none">
<div class="list"><a href="http://www.scscms.com/article/2010-3/1117383717.html" target='_blank'>JS获取XML内容!</a></div>
<div class="list"><a href="http://www.scscms.com/article/2010-3/1210163615.html" target='_blank'>输入框input高级限制级用法指南</a></div>
</span>
<span style="display:none">
<div class="list"><a href="http://www.scscms.com/article/2010-3/1117388330.html" target='_blank'>Flash编程下雪动画的制作</a></div>
<div class="list"><a href="http://www.scscms.com/article/2010-3/1117387972.html" target='_blank'>卷帘效果</a></div>
<div class="list"><a href="http://www.scscms.com/article/2010-3/1117363605.html" target='_blank'>删除文章同时删除图片</a></div>
</span>
</div>
<div>特点：简单javascript代码，一个DIV里固定三个tab，比较整齐。可以同时存在多个art_div标签，排版美观。</div>
</body>
</html>
效果图片
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝这是一条美丽的分割线============================================
上面的tab标签，我们还可以改动一下变成这种效果：
特点是标题在上，标题宽度自动适应，适合多个标签合在一起。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TAB标签选项卡</title>
</head>
<body>
<style type="text/css">
body{
font-size:12px;
}
.art_div{
display:none;
border:1px solid #C7C7CD;
line-height:20px;
padding:4px 0;
border-top:none
}
.tab_ul{
margin:0;padding:0;
height:25px;
border-bottom:1px solid #c7c7cd;
}
.tab_ul li{
float: left;
padding:0 20px;
cursor: pointer;
height:25px;
font-weight:bold;
color:#666;
line-height:25px;
overflow:hidden;
text-align:center;
z-index:2;
border:1px #c7c7cd solid;
border-bottom:none;
border-left:none;
list-style-type: none;
}
ul{margin:0}
.tab_ul .active{ background:url(http://down.scscms.com/pictrue/tab_bg.gif) left -25px repeat-x;}
.tab_ul .normal{ background:url(http://down.scscms.com/pictrue/tab_bg.gif);}
#temp{/*这里的ID与tab无关系，自己按美观定义长度与高度*/}
</style>
<script type="text/javascript">
function nTabs(obj,n){
if(obj.className == "active")return;
var tabList =obj.parentNode.getElementsByTagName("li");
var div=obj.parentNode.parentNode.getElementsByTagName("div");
for(i=0; i <tabList.length; i++){
if (i == n){
obj.className = "active";
div[i].style.display = "block";
}else{
tabList[i].className = "normal";
div[i].style.display = "none";
}
}
}
</script>
<div id="temp">
<ul class="tab_ul">
<li style="border-left:1px #C7C7CD solid" class="active" onclick="nTabs(this,0)">阳光系统</li>
<li class="normal" onclick="nTabs(this,1)">SCSCMS系统长度不固定</li>
<li class="normal" onclick="nTabs(this,2)">太阳光</li>
</ul>
<div class="art_div" style="display:block">
<ul>
<li><a href="http://www.scscms.com/article/2010-3/1210243622.html" target='_blank'>1111开机宽带自动登陆</a></li>
<li><a href="http://www.scscms.com/article/2010-3/1210243622.html" target='_blank'>1111开机宽带自动登陆</a></li>
</ul>
</div>
<div class="art_div">
<ul>
<li><a href="http://www.scscms.com/article/2010-3/1210243622.html" target='_blank'>2222开机宽带自动登陆</a></li>
<li><a href="http://www.scscms.com/article/2010-3/1210243622.html" target='_blank'>2222开机宽带自动登陆</a></li>
</ul>
</div>
<div class="art_div">
<ul>
<li><a href="http://www.scscms.com/article/2010-3/1210243622.html" target='_blank'>3333开机宽带自动登陆</a></li>
<li><a href="http://www.scscms.com/article/2010-3/1210243622.html" target='_blank'>3333开机宽带自动登陆</a></li>
</ul>
</div>
</div>
</body>
</html>
以上代码经过：IE6、IE7、IE8、360、Firefox、chrome、Safari浏览器测试！
关键词: tab标签,tab标签切换,tab标签兼容性 编辑时间: 2012-03-26
1
高兴
0
支持
0
搞笑
0
不解
0
谎言
0
枪稿
0
震惊
0
无奈
0
无聊
0
反对
0
愤怒
100%(1)
0%(0)
中搜索：
中搜索：
- 【管理员_太阳光】不管是飞腾还是其他cms大部分都是有asp模块与标签结合制作插件的。如果纯是html制作出来就是固定的数据的插件。 [2012-05-22 20:21:04]
- 【游客】大阳光你好，记得原在飞腾ＢＢＳ中也常看到你的大作。看到此作后，我想问一下如何插入飞腾获取数据库内容，如文章栏目中的内容。毕竟这些都是html不是asp。 [2012-05-01 22:32:46]
文章图片 article Pictrue
网友评论