Ajax/Js 订阅所有【Ajax/Js】的日志
10-10
25

JsTAB选项卡示例集合

作者:Java伴侣 日期:2010-10-25

字体大小: 小 中 大
仿163的一款TAB选项卡，有的人也称它为网页标签。本标签用到了三个gif背景图片，运行的时候可以点右键保存；无意发现了一这一个，觉得很不错应该奉献给大家，因为它不但美观，而且兼容性好，标签还可以自适应宽度，非常实用



Html代码
<!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>仿网易TAB标签</TITLE>  
<META http-equiv=Content-Type content="text/html; charset=gb2312">  
<STYLE type=text/css>  
BODY {  
    FONT-SIZE: 14px;  
}  
OL LI {  
    MARGIN: 8px  
}  
#con {  
    FONT-SIZE: 12px;  
    MARGIN: 0px auto;  
    WIDTH: 600px  
}  
#tags {  
    PADDING-RIGHT: 0px;  
    PADDING-LEFT: 0px;  
    PADDING-BOTTOM: 0px;  
    MARGIN: 0px 0px 0px 10px;  
    WIDTH: 400px;  
    PADDING-TOP: 0px;  
    HEIGHT: 23px  
}  
#tags LI {  
    BACKGROUND: url(http://jhxk.javaeye.com/upload/attachment/136408/f89059e8-7235-30c7-956f-6944089cd2a3.gif) no-repeat left bottom;  
    FLOAT: left;  
    MARGIN-RIGHT: 1px;  
    LIST-STYLE-TYPE: none;  
    HEIGHT: 23px  
}  
#tags LI A {  
    PADDING-RIGHT: 10px;  
    PADDING-LEFT: 10px;  
    BACKGROUND: url(http://jhxk.javaeye.com/upload/attachment/136410/bfc50a6e-4732-375e-8769-8c6ee90a5618.gif) no-repeat right bottom;  
    FLOAT: left;  
    PADDING-BOTTOM: 0px;  
    COLOR: #999;  
    LINE-HEIGHT: 23px;  
    PADDING-TOP: 0px;  
    HEIGHT: 23px;  
    TEXT-DECORATION: none  
}  
#tags LI.emptyTag {  
    BACKGROUND: none transparent scroll repeat 0% 0%;  
    WIDTH: 4px  
}  
#tags LI.selectTag {  
    BACKGROUND-POSITION: left top;  
    MARGIN-BOTTOM: -2px;  
    POSITION: relative;  
    HEIGHT: 25px  
}  
#tags LI.selectTag A {  
    BACKGROUND-POSITION: right top;  
    COLOR: #000;  
    LINE-HEIGHT: 25px;  
    HEIGHT: 25px  
}  
#tagContent {  
    BORDER-RIGHT: #aecbd4 1px solid;  
    PADDING-RIGHT: 1px;  
    BORDER-TOP: #aecbd4 1px solid;  
    PADDING-LEFT: 1px;  
    PADDING-BOTTOM: 1px;  
    BORDER-LEFT: #aecbd4 1px solid;  
    PADDING-TOP:1px;  
    BORDER-BOTTOM: #aecbd4 1px solid;  
    BACKGROUND-COLOR: #fff  
}  
.tagContent {  
    PADDING-RIGHT: 10px;  
    DISPLAY: none;  
    PADDING-LEFT: 10px;  
    BACKGROUND: url(http://jhxk.javaeye.com/upload/attachment/136408/f89059e8-7235-30c7-956f-6944089cd2a3.gif) repeat-x;  
    PADDING-BOTTOM: 10px;  
    WIDTH: 576px;  
    COLOR: #474747;  
    PADDING-TOP: 10px;  
    HEIGHT: 250px  
}  
#tagContent DIV.selectTag {  
    DISPLAY: block  
}  
</STYLE>  
</HEAD>  
<BODY>  
<DIV id=con>  
  <UL id=tags>  
    <LI><A onClick="selectTag('tagContent0',this)"    
  href="javascript:void(0)">源码爱好者</A> </LI>  
    <LI class=selectTag><A onClick="selectTag('tagContent1',this)"    
  href="javascript:void(0)">ASP源码</A> </LI>  
    <LI><A onClick="selectTag('tagContent2',this)"    
  href="javascript:void(0)">自适应宽度的标签</A> </LI>  
  </UL>  
  <DIV id=tagContent>  
    <DIV class=tagContent id=tagContent0>源码爱好者（<a href="http://www.codefans.net">CoreFans.net</a>）提供各类编程源码、书籍教程、JavaScript/CSS特效代码以及常用软件下载等，做有质量的学习型源码下载站。</DIV>  
    <DIV class="tagContent selectTag" id=tagContent1>这时是ASP标签的内容。</DIV>  
    <DIV class=tagContent id=tagContent2>自适应宽度的标签内容。</DIV>  
  </DIV>  
</DIV>  
<SCRIPT type=text/javascript>  
function selectTag(showContent,selfObj){  
    // 标签  
    var tag = document.getElementById("tags").getElementsByTagName("li");  
    var tagtaglength = tag.length;  
    for(i=0; i<taglength; i++){  
    tag[i].className = "";  
    }  
    selfObj.parentNode.className = "selectTag";  
    // 标签内容  
    for(i=0; j=document.getElementById("tagContent"+i); i++){  
    j.style.display = "none";  
    }  
    document.getElementById(showContent).style.display = "block";  
}  
</SCRIPT>  
</BODY>  
</HTML>  

<!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>仿网易TAB标签</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>
BODY {
    FONT-SIZE: 14px;
}
OL LI {
    MARGIN: 8px
}
#con {
    FONT-SIZE: 12px;
    MARGIN: 0px auto;
    WIDTH: 600px
}
#tags {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px 0px 0px 10px;
    WIDTH: 400px;
    PADDING-TOP: 0px;
    HEIGHT: 23px
}
#tags LI {
    BACKGROUND: url(http://jhxk.javaeye.com/upload/attachment/136408/f89059e8-7235-30c7-956f-6944089cd2a3.gif) no-repeat left bottom;
    FLOAT: left;
    MARGIN-RIGHT: 1px;
    LIST-STYLE-TYPE: none;
    HEIGHT: 23px
}
#tags LI A {
    PADDING-RIGHT: 10px;
    PADDING-LEFT: 10px;
    BACKGROUND: url(http://jhxk.javaeye.com/upload/attachment/136410/bfc50a6e-4732-375e-8769-8c6ee90a5618.gif) no-repeat right bottom;
    FLOAT: left;
    PADDING-BOTTOM: 0px;
    COLOR: #999;
    LINE-HEIGHT: 23px;
    PADDING-TOP: 0px;
    HEIGHT: 23px;
    TEXT-DECORATION: none
}
#tags LI.emptyTag {
    BACKGROUND: none transparent scroll repeat 0% 0%;
    WIDTH: 4px
}
#tags LI.selectTag {
    BACKGROUND-POSITION: left top;
    MARGIN-BOTTOM: -2px;
    POSITION: relative;
    HEIGHT: 25px
}
#tags LI.selectTag A {
    BACKGROUND-POSITION: right top;
    COLOR: #000;
    LINE-HEIGHT: 25px;
    HEIGHT: 25px
}
#tagContent {
    BORDER-RIGHT: #aecbd4 1px solid;
    PADDING-RIGHT: 1px;
    BORDER-TOP: #aecbd4 1px solid;
    PADDING-LEFT: 1px;
    PADDING-BOTTOM: 1px;
    BORDER-LEFT: #aecbd4 1px solid;
    PADDING-TOP:1px;
    BORDER-BOTTOM: #aecbd4 1px solid;
    BACKGROUND-COLOR: #fff
}
.tagContent {
    PADDING-RIGHT: 10px;
    DISPLAY: none;
    PADDING-LEFT: 10px;
    BACKGROUND: url(http://jhxk.javaeye.com/upload/attachment/136408/f89059e8-7235-30c7-956f-6944089cd2a3.gif) repeat-x;
    PADDING-BOTTOM: 10px;
    WIDTH: 576px;
    COLOR: #474747;
    PADDING-TOP: 10px;
    HEIGHT: 250px
}
#tagContent DIV.selectTag {
    DISPLAY: block
}
</STYLE>
</HEAD>
<BODY>
<DIV id=con>
  <UL id=tags>
    <LI><A onClick="selectTag('tagContent0',this)"
  href="javascript:void(0)">源码爱好者</A> </LI>
    <LI class=selectTag><A onClick="selectTag('tagContent1',this)"
  href="javascript:void(0)">ASP源码</A> </LI>
    <LI><A onClick="selectTag('tagContent2',this)"
  href="javascript:void(0)">自适应宽度的标签</A> </LI>
  </UL>
  <DIV id=tagContent>
    <DIV class=tagContent id=tagContent0>源码爱好者（<a href="http://www.codefans.net">CoreFans.net</a>）提供各类编程源码、书籍教程、JavaScript/CSS特效代码以及常用软件下载等，做有质量的学习型源码下载站。</DIV>
    <DIV class="tagContent selectTag" id=tagContent1>这时是ASP标签的内容。</DIV>
    <DIV class=tagContent id=tagContent2>自适应宽度的标签内容。</DIV>
  </DIV>
</DIV>
<SCRIPT type=text/javascript>
function selectTag(showContent,selfObj){
    // 标签
    var tag = document.getElementById("tags").getElementsByTagName("li");
    var taglength = tag.length;
    for(i=0; i<taglength; i++){
    tag[i].className = "";
    }
    selfObj.parentNode.className = "selectTag";
    // 标签内容
    for(i=0; j=document.getElementById("tagContent"+i); i++){
    j.style.display = "none";
    }
    document.getElementById(showContent).style.display = "block";
}
</SCRIPT>
</BODY>
</HTML>

淡蓝色竖向简洁Tab

淡蓝色竖向简洁Tab，选项卡，很多人都喜欢的一种风格。



文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: 选项卡
相关日志:
评论: 0 | 引用: 0 | 查看次数: 524
发表评论
昵　称:
密　码: 游客发言不需要密码.
内　容:
验证码: 验证码
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.
字数限制 1000 字 | UBB代码 开启 | [img]标签 关闭