Js Tab选项卡示例集合

jhlovett

浏览: 600679 次
性别:
来自: 卡哇伊

最近访客更多访客>>

vcmasm

成长的菜鸟

zaweze

wwwxxxttt

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript

VB ASP.net VB.NET ASP CSS

清新选项卡（一个页面布局两个）

一个横排的清新选项卡，在一个页面布局两个，把上面的two复制，把two改成three，或任何一个不同名的id。代码中含有丰富注释，应该都能看懂的，淡蓝色风格，也是使用比较多的一种，希望大家喜欢，同时也为一些朋友不知如何在同一页布局多个选项卡提供一个参考实例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>简洁Tab</title>
<style type="text/css">
<!--
body {
	padding:0;
	font:12px "宋体";
}
/*Tab1*/
#lib_Tab1 {
	width:500px;
	margin:0px;
	padding:0px;
	margin-bottom:15px;
}
/*Tab2*/
#lib_Tab2 {
	width:576px;
	margin:0px;
	padding:0px;
	margin-bottom:15px;
}
.lib_tabborder {
	border:1px solid #95C9E1;
}
.lib_Menubox {
	height:28px;
	line-height:28px;
	position:relative;
}
.lib_Menubox ul {
	margin:0px;
	padding:0px;
	list-style:none;
	position:absolute;
	top:3px;
	left:0;
	margin-left:10px;
	height:25px;
	text-align:center;
}
.lib_Menubox li {
	float:left;
	display:block;
	cursor:pointer;
	width:114px;
	color:#949694;
	font-weight:bold;
	margin-right:2px;
	height:25px;
	line-height:25px;
	background-color:#E4F2FD
}
/*  www.codefans.net */
.lib_Menubox li.hover {
	padding:0px;
	background:#fff;
	width:116px;
	border-left:1px solid #95C9E1;
	border-top:1px solid #95C9E1;
	border-right:1px solid #95C9E1;
	color:#739242;
	height:25px;
	line-height:25px;
}
.lib_Contentbox {
	clear:both;
	margin-top:0px;
	border-top:none;
	height:181px;
	text-align:center;
	padding-top:8px;
}
-->
</style>
<script>
<!--
function setTab(name,cursel,n){
 for(i=1;i<=n;i++){
  var menu=document.getElementById(name+i);
  var con=document.getElementById("con_"+name+"_"+i);
  menu.className=i==cursel?"hover":"";
  con.style.display=i==cursel?"block":"none";
 }
}
//-->
</script>
</head>
<body>
<div id="lib_Tab1">
  <div class="lib_Menubox lib_tabborder">
    <ul>
      <li id="one1" onclick="setTab('one',1,4)" class="hover">ASP</li>
      <li id="one2" onclick="setTab('one',2,4)" >PHP</li>
      <li id="one3" onclick="setTab('one',3,4)">.NET</li>
      <li id="one4" onclick="setTab('one',4,4)">JSP</li>
    </ul>
  </div>
  <div class="lib_Contentbox lib_tabborder">
    <div id="con_one_1" >ASP</div>
    <div id="con_one_2" style="display:none">PHP</div>
    <div id="con_one_3" style="display:none">.NET</div>
    <div id="con_one_4" style="display:none">JSP</div>
  </div>
</div>
<div id="lib_Tab2">
  <div class="lib_Menubox lib_tabborder">
    <ul>
      <li id="two1" onclick="setTab('two',1,4)" >源码爱好者</li>
      <li id="two2" onclick="setTab('two',2,4)"class="hover" >最新更新</li>
      <li id="two3" onclick="setTab('two',3,4)">下载排行</li>
      <li id="two4" onclick="setTab('two',4,4)">最新更新</li>
    </ul>
  </div>
  <div class="lib_Contentbox lib_tabborder">
    <div id="con_two_1" >源码爱好者</div>
    <div id="con_two_2" style="display:none">最新更新</div>
    <div id="con_two_3" style="display:none">下载排行</div>
    <div id="con_two_4" style="display:none">最新更新</div>
  </div>
</div>
</body>
</html>

兼容性好的TAB选项卡

兼容性很好的TAB选项卡，兼容目前常用的IE,FF,Opera,Safari,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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>兼容性好的TAB选项卡(IE,FF,Opera,Safari,Chrome)</title>
<style type="text/css">
#tab_container1 {
	width:600px;
	text-align:left;
}
.cls_tab_nav {
	height:26px;
	overflow:hidden;
	font-size:12px;
	text-align:left;
	background:url(http://jhxk.iteye.com/upload/attachment/136400/a22ba0d1-cada-364c-b80d-4220738287c4.jpg) repeat-x bottom;
}
.cls_tab_nav ul {
	font-size:9pt;
	margin:0;
	padding:0;
}
.cls_tab_nav_li {
	background:url(http://jhxk.iteye.com/upload/attachment/136402/aac8448f-66b3-3768-b2ce-90085e29d7d6.jpg) no-repeat -157px 0;
	width:157px;
	height:26px;
	line-height:26px;
	float:left;
	display:inline;
	overflow:hidden;
	text-align:center;
	cursor:pointer;
}
.cls_tab_nav_li_first {
	background-position:0px 0px;
}
.cls_tab_nav_li a {
	text-decoration:none;
	color:#555;
	font-size:12px;
}
.cls_tab_body {
	border:1px solid #FFAE1E;
	border-top:none;
	min-height:260px;
	padding:20px;
}
.cls_div {
	display:none;
	font-size:14px;
}
</style>
</head>
<body>
<div id="tab_container1">
  <div class="cls_tab_nav">
    <ul>
      <li class="cls_tab_nav_li cls_tab_nav_li_first"><a href="/">源码爱好者最新更新</a></li>
      <li class="cls_tab_nav_li"><a href="/sort/list_1_1.shtml">ASP类最新更新</a></li>
      <li class="cls_tab_nav_li"><a href="#">C#类最新更新</a></li>
    </ul>
  </div>
  <div class="cls_tab_body">
    <div class="cls_div" style="display:block;">这里是源码爱好者最新更新的显示内容</div>
    <div class="cls_div">ASP的显示内容</div>
    <div class="cls_div">C#的显示内容/</div>
  </div>
</div>
<script type="text/javascript">
try{
 document.execCommand("BackgroundImageCache", false, true);
}catch(e){}
function $(element){
 if(arguments.length>1){
  for(var i=0,elements=[],length=arguments.length;i<length;i++)
   elements.push($(arguments[i]));
  return elements;
 }
 if(typeof element=="string")
  return document.getElementById(element);
 else
  return element;
}
var Class={
 create:function(){
  return function(){
   this.initialize.apply(this,arguments);
  } 
 }
}
Object.extend=function(destination,source){
 for(var property in source){
  destination[property]=source[property];
 }
 return destination;
}
var tabMenu=Class.create();
tabMenu.prototype={
 initialize:function(container,selfOpt,otherOpt){
  this.container=$(container);
    var selfOptions=Object.extend({fontWeight:"bold",fontSize:"12px",color:"#FFBC44"},selfOpt||{});
  var otherOptions=Object.extend({fontWeight:"normal",fontSize:"12px",color:"#666"},otherOpt||{});
  //用for循环得到objs数组,主要是为了兼容非IE浏览器把空白也当作子对象
  for(var i=0,length=this.container.childNodes.length,objs=[];i<length;i++){
   if(this.container.childNodes[i].nodeType==1)
    objs.push(this.container.childNodes[i]);
  }
  var tabArray=objs[0].getElementsByTagName("li");
  //用for循环得到divArray数组,主要是为了兼容非IE浏览器把空白也当作子对象
  var divArray=new Array();
  for(i=0,length=objs[1].childNodes.length;i<length;i++){
   if(objs[1].childNodes[i].nodeType==1)
    divArray.push(objs[1].childNodes[i]);
  }
  
  for(i=0,length=tabArray.length;i<length;i++){
   tabArray[i].length=length;
   tabArray[i].index=i;
   tabArray[i].onmouseover=function(){
    //其它选项卡样式设置
    for(var j=0;j<this.length;j++){
     tabArray[j].style.backgroundPosition="-"+tabArray[j].offsetWidth+"px 0";
     for(var property in selfOptions){
      tabArray[j].firstChild.style[property]=otherOptions[property];
     }
    }
    //当前选项卡样式
    this.style.backgroundPosition="0 0";
    for(var property in selfOptions){
     this.firstChild.style[property]=selfOptions[property];
     /*
      注意this.style.property和selfOptions.property的用法错误
      style.fontWeight正确
      style["fontWeight"]正确
      style["font-weight"]错误
     */
    }
    //隐藏其它选项卡
    for(j=0;j<this.length;j++){
     divArray[j].style.display="none";
    }
    //显示当前选项卡
    divArray[this.index].style["display"]="block";
   }
  }
 }
}
var tab1=new tabMenu("tab_container1",{fontSize:"14px",color:"#FFBC44",fontWeight:"bold"},{fontWeight:"normal",color:"#666"});
</script>
</body>
</html>

仿淘宝阴影效果的滑动门选项卡

仿淘宝首页的一款漂亮滑动门选项卡，相信你100%喜欢，不信就运行一下看看效果，本人比较喜欢，带阴影立体效果，蓝色清新界面，真的很不错！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>淘宝滑动门效果</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
}
body {
	font:normal 12px Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
}
#warpper {
	position:absolute;
	left:100px;
	top:100px;
}
h5 {
	float:left;
}/* www.codefans.net */
a {
	text-decoration:underline;
	cursor:pointer;
	font-weight:bold;
}
dl {
	height:18px;
	line-height:18px;
	background:#f7f7f7;
	padding:0 10px;
}
dt, .normal {
	float:left;
	padding:0 10px;
	border-right:1px solid #ccc;
	text-decoration:none;
	width:auto;
	cursor:pointer;
}
dt.over {
	position:relative;
	border:1px solid #86e5f0;
	padding:0 10px 15px 10px;
	border-bottom:1px solid #caf1f1;
	margin:-1px 0 0 -1px;
	z-index:1000;
	color:#ff6026;
	text-decoration:underline;
	background:#caf1f1;
	height:22px;
}
li {
	float:left;
	list-style-type:none;
	margin:5px 10px;
	width:230px;
}
dl dd {
	position:absolute;
	width:500px;
	left:0;
	top:37px!important;
	border:1px solid #86e5f0;
	background:#caf1f1;
filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=120, color=#cccccc);
	padding:10px 0;
}
.block {
	display:block;
}
.none {
	display:none;
}
</style>
<script language="javascript">
 function $(str){ return document.getElementById(str);}
 function $$(str){ return document.getElementsByTagName(str);}
 function changeMenu(thisObj,num){
  if(thisObj.className=="over") return false;
  var tabObj=thisObj.parentNode.getAttribute("id");
  var obj_dt=$("warpper").getElementsByTagName("dt");
  for(var i=0;i<obj_dt.length;i++){
   if(i==num){
    thisObj.className="over";
    $("c"+(i+1)).className="block";
   }
   else{
    obj_dt[i].className="normal";
    $("c"+(i+1)).className="none";
   }
  }
 }
</script>
</head>
<body>
<dl id="warpper">
  <h5>源码导航：</h5>
  <dt onmouseover="changeMenu(this,0);">ASP.NET</dt>
  <dd id="c1" class="none">
    <ul>
      <li><a href="/soft/3168.shtml" target="_blank">X-BLOG生成静态的博客程序 v1.0</a></li>
      <li><a href="http://www.codefans.net/soft/3165.shtml" target="_blank">VB获取计算机所有串口端口地址</a></li>
      <li><a href="/soft/3167.shtml" target="_blank">下拉式时间控件源码VB版</a></li>
      <li><a href="http://www.codefans.net/soft/3160.shtml" target="_blank">PHP生成3D的百分比图</a></li>
    </ul>
  </dd>
  <dt onmouseover="changeMenu(this,1);">PHP</dt>
  <dd id="c2" class="none">
    <ul>
      <li><a href="/soft/3182.shtml" target="_blank">《jQuery in Action》 随书源代码</a></li>
      <li><a href="http://www.codefans.net/soft/3173.shtml" target="_blank">可以发表情的VB聊天室面板程序</a></li>
      <li><a href="/soft/3171.shtml" target="_blank">界面漂亮的VB版MP3播放器</a></li>
    </ul>
  </dd>
  <dt onmouseover="changeMenu(this,2);">JAVA</dt>
  <dd id="c3" class="none">
    <ul>
      <li><a href="/soft/3194.shtml" target="_blank">JavaScript日历选择器</a></li>
      <li><a href="/soft/1061.shtml" target="_blank">B-check PHP探针 v0.04</a></li>
      <li><a href="/soft/3091.shtml" target="_blank">C9 ASP静态文章系统 v1.3</a></li>
      <li><a href="/soft/3183.shtml" target="_blank">jQuery初学实例代码集</a></li>
    </ul>
  </dd>
  <dt onmouseover="changeMenu(this,3);">ASP</dt>
  <dd id="c4" class="none">
    <ul>
      <li><a href="/soft/1960.shtml" target="_blank">最新IP地址库及ASP调用示例</a></li>
      <li><a href="/soft/2993.shtml" target="_blank">VB基于API的高级文件搜索工具</a></li>
      <li><a href="/soft/1712.shtml" target="_blank">公交线路查询带后台</a></li>
      <li><a href="/soft/1086.shtml" target="_blank">全国邮编查询程序ASP版附数据库</a></li>
    </ul>
  </dd>
  <dt onmouseover="changeMenu(this,4);">AJAX</dt>
  <dd id="c5" class="none">
    <ul>
      <li><a href="/soft/2110.shtml" target="_blank">C#仿简单的CAD矢量绘图源码</a></li>
      <li><a href="/soft/1189.shtml" target="_blank">凹丫丫ASP新闻系统 v4.7</a></li>
      <li><a href="/soft/3014.shtml" target="_blank">Ninu 简单ASP新闻系统 v1.0</a></li>
    </ul>
  </dd>
  <dt onmouseover="changeMenu(this,5);">书籍</dt>
  <dd id="c6" class="none">
    <ul>
      <li><a href="/soft/2612.shtml" target="_blank">VB编写的超级卸载工具源代码</a></li>
      <li><a href="/soft/3022.shtml" target="_blank">Modx CMS 生成HTML v0.9</a></li>
      <li><a href="/soft/3171.shtml" target="_blank">界面漂亮的VB版MP3播放器</a></li>
      <li><a href="/soft/3051.shtml" target="_blank">VB中的XP风格Frame容器使用示例</a></li>
      <li><a href="/soft/3190.shtml" target="_blank">功能很强的VB个人防火墙程序</a></li>
      <li><a href="/soft/2767.shtml" target="_blank">汉字转换为拼音的C++程序代码</a></li>
    </ul>
  </dd>
</dl>
</body>
</html>

一款经典简洁的CSS滑动门代码

一款经典简洁的CSS滑动门代码，来自经典论坛，很多网站都见到过这种，代码并不多，非常实用。响应鼠标滑过而不是点击鼠标才切换，适你的需要了，滑动门的灵魂所在。

<!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=gb2312" />
<title>滑动门</title>
<style media="screen" type="text/css">
<!--
* {
	font-size:12px;
}
html, body {
	margin:0;
	text-align:center;
	over-flow:hidden;
	height:100%;
	width:100%;
}
UL {
	list-style-type:none;
	margin:0px;
}
/* 标准盒模型 */
.ttl {
	height:18px;
}
.ctt {
	height:auto;
	padding:6px;
	clear:both;
	border:1px solid #064ca1;
	border-top:0;
	text-align:left;
}
.w936 {
	margin:2px 0;
	clear:both;
	width:936px;/*滑动门的宽度*/
}
/* TAB 切换效果 */
.tb_ {
	background-image: url('http://www.codefans.net/jscss/demoimg/200901/tabs1.gif');
	background-repeat: repeat-x;
	background-color: #E6F2FF;
}
.tb_ ul {
	height:24px;
}
.tb_ li {
	float:left;
	height: 24px;
	line-height:1.9;
	width: 94px;
	cursor:pointer;
}
/* 控制显示与隐藏css类 */
.normaltab {
	background-image:url('http://www.codefans.net/jscss/demoimg/200901/tabs2.gif');
	background-repeat: no-repeat;
	color:#1F3A87;
}
.hovertab {
	background-image: url('http://www.codefans.net/jscss/demoimg/200901/tabs3.gif');
	background-repeat: no-repeat;
	color:#1F3A87;
	font-weight:bold
}
.dis {
	display:block;
}
.undis {
	display:none;
}
-->
</style>
<script type="text/javascript" language="javascript">
//<!CDATA[
function g(o){return document.getElementById(o);}
function HoverLi(n){
//如果有N个标签,就将i<=N;
for(var i=1;i<=6;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
}
//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
//]]>
</script>
</head>
<body>
<div class="w936">
  <div id="tb_" class="tb_">
    <ul>
      <li id="tb_1" class="hovertab" onmouseover="x:HoverLi(1);"> ASP.NET</li>
      <li id="tb_2" class="normaltab" onmouseover="i:HoverLi(2);"> MYSQL</li>
      <li id="tb_3" class="normaltab" onmouseover="a:HoverLi(3);"> DELPHI</li>
      <li id="tb_4" class="normaltab" onmouseover="o:HoverLi(4);"> VB.NET</li>
      <li id="tb_5" class="normaltab" onmouseover="g:HoverLi(5);"> JAVA</li>
      <li id="tb_6" class="normaltab" onmouseover="z:HoverLi(6);"> PHP5</li>
    </ul>
  </div>
  <div class="ctt">
    <div class="dis" id="tbc_01">这里是ASP.NET的相关内容</div>
    <div class="undis" id="tbc_02">这里是MYSQL的相关内容</div>
    <div class="undis" id="tbc_03">这里是DELPHI的相关内容</div>
    <div class="undis" id="tbc_04">这里是VB.NET的相关内容</div>
    <div class="undis" id="tbc_05">这里是JAVA的相关内容</div>
    <div class="undis" id="tbc_06">这里是PHP5的相关内容</b> </div>
  </div>
</div>
</body>
</html>

查看图片附件

分享到：

JsTAB选项卡示例集合(二) | Sql Server 常用日期格式

2009-08-15 23:22
浏览 7916
评论(2)
查看更多

2 楼 lgx2351 2010-01-25

谢谢!很好！先收下了：）

1 楼 woo2000 2009-11-05

jlkdjflaksjdf
fldkajsdlfkjas
lfkasjdflkjsa
lkjfslkdjf
lkjlk

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论