Js Tab选项卡示例集合

娓??伴??椤瑰?★?涓?涓?椤甸?㈠?灞?涓や釜锛?

涓?涓?妯?????娓??伴??椤瑰?★??ㄤ?涓?椤甸?㈠?灞?涓や釜锛???涓??㈢??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" 慰nclick="setTab('one',1,4)" class="hover">ASP</li>
      <li id="one2" 慰nclick="setTab('one',2,4)" >PHP</li>
      <li id="one3" 慰nclick="setTab('one',3,4)">.NET</li>
      <li id="one4" 慰nclick="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" 慰nclick="setTab('two',1,4)" >婧????卞ソ??</li>
      <li id="two2" 慰nclick="setTab('two',2,4)"class="hover" >???版?存??lt;/li>
      <li id="two3" 慰nclick="setTab('two',3,4)">涓?杞芥??琛?</li>
      <li id="two4" 慰nclick="setTab('two',4,4)">???版?存??lt;/li>
    </ul>
  </div>
  <div class="lib_Contentbox lib_tabborder">
    <div id="con_two_1" >婧????卞ソ??</div>
    <div id="con_two_2" style="display:none">???版?存??lt;/div>
    <div id="con_two_3" style="display:none">涓?杞芥??琛?</div>
    <div id="con_two_4" style="display:none">???版?存??lt;/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="/" target="_blank" rel="external nofollow" >婧????卞ソ?????版?存??lt;/a></li>
      <li class="cls_tab_nav_li"><a href="/sort/list_1_1.shtml" target="_blank" rel="external nofollow" >ASP绫绘???版?存??lt;/a></li>
      <li class="cls_tab_nav_li"><a href="#" target="_blank" rel="external nofollow" >C#绫绘???版?存??lt;/a></li>
    </ul>
  </div>
  <div class="cls_tab_body">
    <div class="cls_div" style="display:block;">杩?????婧????卞ソ?????版?存?扮???剧ず??瀹?lt;/div>
    <div class="cls_div">ASP???剧ず??瀹?lt;/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||{});
  //??or寰???寰???bjs?扮?,涓昏???涓轰??煎?归??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");
  //??or寰???寰???ivArray?扮?,涓昏???涓轰??煎?归??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].慰nm慰use慰ver=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 慰nm慰use慰ver="changeMenu(this,0);">ASP.NET</dt>
  <dd id="c1" class="none">
    <ul>
      <li><a href="/soft/3168.shtml" target="_blank" rel="external nofollow"  target="_blank">X-BLOG????????????瀹㈢?搴? v1.0</a></li>
      <li><a href="http://www.codefans.net/soft/3165.shtml" target="_blank" rel="external nofollow"  target="_blank">VB?峰??璁＄???烘????涓插?ｇ???ｅ?板??</a></li>
      <li><a href="/soft/3167.shtml" target="_blank" rel="external nofollow"  target="_blank">涓???寮??堕?存?т欢婧???VB??</a></li>
      <li><a href="http://www.codefans.net/soft/3160.shtml" target="_blank" rel="external nofollow"  target="_blank">PHP????3D???惧??姣???lt;/a></li>
    </ul>
  </dd>
  <dt 慰nm慰use慰ver="changeMenu(this,1);">PHP</dt>
  <dd id="c2" class="none">
    <ul>
      <li><a href="/soft/3182.shtml" target="_blank" rel="external nofollow"  target="_blank">??jQuery in Action?? ??涔??浠ｇ??</a></li>
      <li><a href="http://www.codefans.net/soft/3173.shtml" target="_blank" rel="external nofollow"  target="_blank">??浠ュ??琛ㄦ????VB??澶╁?ら?㈡?跨?搴?</a></li>
      <li><a href="/soft/3171.shtml" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank">???㈡?浜???VB??MP3???惧??lt;/a></li>
    </ul>
  </dd>
  <dt 慰nm慰use慰ver="changeMenu(this,2);">JAVA</dt>
  <dd id="c3" class="none">
    <ul>
      <li><a href="/soft/3194.shtml" target="_blank" rel="external nofollow"  target="_blank">JavaScript?ュ?????╁??lt;/a></li>
      <li><a href="/soft/1061.shtml" target="_blank" rel="external nofollow"  target="_blank">B-check PHP?㈤?? v0.04</a></li>
      <li><a href="/soft/3091.shtml" target="_blank" rel="external nofollow"  target="_blank">C9 ASP??????绔?绯荤? v1.3</a></li>
      <li><a href="/soft/3183.shtml" target="_blank" rel="external nofollow"  target="_blank">jQuery??瀛???渚?浠ｇ????</a></li>
    </ul>
  </dd>
  <dt 慰nm慰use慰ver="changeMenu(this,3);">ASP</dt>
  <dd id="c4" class="none">
    <ul>
      <li><a href="/soft/1960.shtml" target="_blank" rel="external nofollow"  target="_blank">????P?板??搴???ASP璋??ㄧず渚?</a></li>
      <li><a href="/soft/2993.shtml" target="_blank" rel="external nofollow"  target="_blank">VB?轰?API??楂?绾ф??浠舵??绱㈠伐??lt;/a></li>
      <li><a href="/soft/1712.shtml" target="_blank" rel="external nofollow"  target="_blank">??浜ょ嚎璺??ヨ?㈠甫????lt;/a></li>
      <li><a href="/soft/1086.shtml" target="_blank" rel="external nofollow"  target="_blank">?ㄥ?介??缂??ヨ?㈢?搴?ASP?????版??搴?</a></li>
    </ul>
  </dd>
  <dt 慰nm慰use慰ver="changeMenu(this,4);">AJAX</dt>
  <dd id="c5" class="none">
    <ul>
      <li><a href="/soft/2110.shtml" target="_blank" rel="external nofollow"  target="_blank">C#浠跨??????CAD?㈤??缁??炬???</a></li>
      <li><a href="/soft/1189.shtml" target="_blank" rel="external nofollow"  target="_blank">?逛斧涓?ASP?伴?荤郴缁? v4.7</a></li>
      <li><a href="/soft/3014.shtml" target="_blank" rel="external nofollow"  target="_blank">Ninu 绠???ASP?伴?荤郴缁? v1.0</a></li>
    </ul>
  </dd>
  <dt 慰nm慰use慰ver="changeMenu(this,5);">涔??</dt>
  <dd id="c6" class="none">
    <ul>
      <li><a href="/soft/2612.shtml" target="_blank" rel="external nofollow"  target="_blank">VB缂?????瓒?绾у?歌浇宸ュ?锋?浠ｇ??</a></li>
      <li><a href="/soft/3022.shtml" target="_blank" rel="external nofollow"  target="_blank">Modx CMS ????HTML v0.9</a></li>
      <li><a href="/soft/3171.shtml" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank">???㈡?浜???VB??MP3???惧??lt;/a></li>
      <li><a href="/soft/3051.shtml" target="_blank" rel="external nofollow"  target="_blank">VB涓???XP椋???rame瀹瑰?ㄤ娇?ㄧず渚?</a></li>
      <li><a href="/soft/3190.shtml" target="_blank" rel="external nofollow"  target="_blank">???藉?寮虹??VB涓?浜洪?茬??澧?绋?搴?</a></li>
      <li><a href="/soft/2767.shtml" target="_blank" rel="external nofollow"  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>婊??ㄩ??lt;/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" 慰nm慰use慰ver="x:HoverLi(1);"> ASP.NET</li>
      <li id="tb_2" class="normaltab" 慰nm慰use慰ver="i:HoverLi(2);"> MYSQL</li>
      <li id="tb_3" class="normaltab" 慰nm慰use慰ver="a:HoverLi(3);"> DELPHI</li>
      <li id="tb_4" class="normaltab" 慰nm慰use慰ver="o:HoverLi(4);"> VB.NET</li>
      <li id="tb_5" class="normaltab" 慰nm慰use慰ver="g:HoverLi(5);"> JAVA</li>
      <li id="tb_6" class="normaltab" 慰nm慰use慰ver="z:HoverLi(6);"> PHP5</li>
    </ul>
  </div>
  <div class="ctt">
    <div class="dis" id="tbc_01">杩?????ASP.NET???稿?冲??瀹?lt;/div>
    <div class="undis" id="tbc_02">杩?????MYSQL???稿?冲??瀹?lt;/div>
    <div class="undis" id="tbc_03">杩?????DELPHI???稿?冲??瀹?lt;/div>
    <div class="undis" id="tbc_04">杩?????VB.NET???稿?冲??瀹?lt;/div>
    <div class="undis" id="tbc_05">杩?????JAVA???稿?冲??瀹?lt;/div>
    <div class="undis" id="tbc_06">杩?????PHP5???稿?冲??瀹?lt;/b> </div>
  </div>
</div>
</body>
</html>

Js Tab选项卡示例集合

继续阅读

请求超时VUE axios重新再次请求

IE8 CSS设置DIV居中，添加“margin:0 auto”

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

GridView终极用法(一)

layui多任务上传添加进度条