管理资源吧首页>>>教程>>>编程>>>CSS/HTML教程>>>

javascript横排竖排标准选项卡效果代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="keywords" content="PRcss,xhtml,html,css,js,book,个人主页,无聊,神经,懒惰" />

<meta name="description" content="PRcss的个人主页,无聊的,神经的,懒惰的..." />

<meta name="Author" content="PRcss,qq:50198763" />

<meta name="Copyright" content="本页版权归PRcss所有。All Rights Reserved" />

<title>PRcss的选项卡 www.glzy8.com</title>

<style type="text/css">

<!--

* { margin:0; padding:0; font-size:12px; font-weight:normal; }

.jj  { font-weight:bolder!important; }

.box { border-top-color:#c00!important; }

.pr { color:#060!important; }

#tab01 { position:relative; width:336px; height:88px; padding-top:15px; margin:50px; overflow:hidden; }

#tab01 h3 { position:relative; z-index:2; float:left; height:14px; padding:0 7px 0 8px; margin-left:-1px; border-left:solid 1px #ccc; border-right:solid 1px #fff; text-align:center; background:#fff; cursor:pointer; }

#tab01 h3.up { height:18px; padding:5px 7px 0 7px; margin:-6px 0 0 0; border:solid #ccc; border-width:1px 1px 0; color:#c00; }

#tab01 div { display:none; position:absolute; left:0; top:32px; z-index:1; width:324px; height:54px; padding:5px; border:solid 1px #ccc; color:#666; }

#tab01 div.up { display:block; }

#tab02 { position:relative; width:200px; margin:50px; border:solid #ccc; border-width:0 1px 1px; }

#tab02 h4 { height:18px; line-height:18px; border:solid #ccc; border-width:1px 0; margin-bottom:-1px; text-align:center; background:#f6f6f6; cursor:pointer; }

#tab02 h4.up { color:#c00; }

#tab02 ol { display:none; height:54px; padding:5px; color:#666; }

#tab02 ol.up { display:block; }

#tab03 { position:relative; width:100px; margin:50px; }

#tab03 h3 { position:relative; z-index:1; height:16px; padding-top:4px; margin-bottom:-1px; border:solid #ccc; border-width:1px 0 1px 1px; text-align:center; font-family:宋体; background:#eee; cursor:pointer; }

#tab03 h3.up { z-index:3; color:#c00; background:#fff; }

#tab03 div.tab { display:none; position:absolute; left:99px; top:0; z-index:2; width:300px; height:200px; padding:5px; border:solid 1px #ccc; color:#666; }

#tab03 div.tab.up { display:block; }

-->

</style>

</head>

<body>

<div id="tab01">

<h3>首页</h3>

<div class="jj"><p>嘿嘿，无视div原始class值。</p></div>

<h3 class="pr">测试</h3>

<div><p>继续无视h3原始class值。</p></div>

<h3>无聊</h3>

<div><p>h3没有值也可以～</p></div>

<h3 class="box">傻蛋</h3>

<div><p>div没有值一样可以～</p></div>

</div>

<div id="tab02">

<h4>首页</h4>

<ol class="pr"><li>嘿嘿，无视容器原始class值。</li></ol>

<h4 class="box">测试</h4>

<ol><li>继续无视h3原始class值。</li></ol>

<h4>无聊</h4>

<ol><li>h3没有值也可以～</li></ol>

<h4 class="bb">傻蛋</h4>

<ol><li>div没有值一样可以～</li></ol>

</div>

<div id="tab03">

<h3>首页</h3>

<div class="tab"><p>嘿嘿，无视h3原始class值。</p></div>

<h3>测试</h3>

<div class="tab wushi"><p>继续无视div原始class值。</p></div>

<h3>无聊</h3>

<div class="tab"><p>h3没有值也可以～</p></div>

<h3 class="box">傻蛋</h3>

<div class="tab tab123"><p>class值相似一样也可以～</p><div><p>指定class后，即时再多一个div也行。</p></div></div>

</div>

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%0D%0A%3C!--%20%0D%0A%0D%0Afunction%20Pid(id%2Ctag)%7B%20%0D%0A%0D%0A%20%20%20%20if(!tag)%7B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20return%20document.getElementById(id)%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20else%7B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20return%20document.getElementById(id).getElementsByTagName(tag)%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%20%E9%80%89%E9%A1%B9%E5%8D%A1%20-%20%5Bid%5D%2C%5Bhx%3D%E6%A0%87%E9%A2%98%5D%2C%5Bbox%3D%E5%AE%B9%E5%99%A8%E6%A0%87%E8%AE%B0%5D%2C%5BiClass%3D%E5%AE%B9%E5%99%A8%E6%A0%B7%E5%BC%8F%5D%2C%5Bs%3D%E4%BA%8B%E4%BB%B6%5D%2C%5Bpr%3D%E5%BA%8F%E5%88%97%5D%20%0D%0A%0D%0Afunction%20tab(id%2Chx%2Cbox%2CiClass%2Cs%2Cpr)%7B%20%0D%0A%0D%0A%20%20%20%20var%20hxs%3DPid(id%2Chx)%3B%20%0D%0A%0D%0A%20%20%20%20var%20boxs%3DPid(id%2Cbox)%3B%20%0D%0A%0D%0A%20%20%20%20if(!iClass)%7B%20%2F%2F%20%E5%A6%82%E6%9E%9C%E4%B8%8D%E6%8C%87%E5%AE%9Aclass%EF%BC%8C%E5%88%99%EF%BC%9A%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20boxsClass%3Dboxs%3B%20%2F%2F%20%E7%9B%B4%E6%8E%A5%E4%BD%BF%E7%94%A8box%E4%BD%9C%E4%B8%BA%E5%AE%B9%E5%99%A8%20%0D%0A%0D%0A%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20else%7B%20%2F%2F%20%E5%A6%82%E6%9E%9C%E6%8C%87%E5%AE%9Aclass%EF%BC%8C%E5%88%99%EF%BC%9A%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20var%20boxsClass%20%3D%20%5B%5D%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20for(i%3D0%3Bi%3Cboxs.length%3Bi%2B%2B)%7B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(boxs%5Bi%5D.className.match(%2F%5Cbtab%5Cb%2F))%7B%2F%2F%20%E5%88%A4%E6%96%AD%E5%AE%B9%E5%99%A8%E7%9A%84class%E6%98%AF%E5%90%A6%E5%8C%B9%E9%85%8D%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20boxsClass.push(boxs%5Bi%5D)%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20if(!pr)%7B%20%2F%2F%20%E5%A6%82%E6%9E%9C%E4%B8%8D%E6%8C%87%E5%AE%9A%E9%A2%84%E5%B1%95%E5%BC%80%E5%AE%B9%E5%99%A8%EF%BC%8C%E5%88%99%EF%BC%9A%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20go_to(0)%3B%20%2F%2F%20%E9%BB%98%E8%AE%A4%E5%B1%95%E5%BC%80%E5%BA%8F%E5%88%97%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20yy()%3B%20%0D%0A%0D%0A%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20else%20%7B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20go_to(pr)%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20yy()%3B%20%0D%0A%0D%0A%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20function%20yy()%7B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20for(var%20i%3D0%3Bi%3Chxs.length%3Bi%2B%2B)%7B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20hxs%5Bi%5D.temp%3Di%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(!s)%7B%2F%2F%20%E5%A6%82%E6%9E%9C%E4%B8%8D%E6%8C%87%E5%AE%9A%E4%BA%8B%E4%BB%B6%EF%BC%8C%E5%88%99%EF%BC%9A%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20s%3D%22onmouseover%22%3B%20%2F%2F%20%E4%BD%BF%E7%94%A8%E9%BB%98%E8%AE%A4%E4%BA%8B%E4%BB%B6%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20hxs%5Bi%5D%5Bs%5D%3Dfunction()%7B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20go_to(this.temp)%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20else%7B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20hxs%5Bi%5D%5Bs%5D%3Dfunction()%7B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20go_to(this.temp)%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20function%20go_to(pr)%7B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20for(var%20i%3D0%3Bi%3Chxs.length%3Bi%2B%2B)%7B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(!hxs%5Bi%5D.tmpClass)%7B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20hxs%5Bi%5D.tmpClass%3Dhxs%5Bi%5D.className%2B%3D%22%20pr1984_com%22%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20boxsClass%5Bi%5D.tmpClass%3DboxsClass%5Bi%5D.className%2B%3D%22%20pr1984_com%22%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(pr%3D%3Di)%7B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20hxs%5Bi%5D.className%2B%3D%22%20up%22%3B%20%2F%2F%20%E5%B1%95%E5%BC%80%E7%8A%B6%E6%80%81%EF%BC%9A%E6%A0%87%E9%A2%98%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20boxsClass%5Bi%5D.className%2B%3D%22%20up%22%3B%20%2F%2F%20%E5%B1%95%E5%BC%80%E7%8A%B6%E6%80%81%EF%BC%9A%E5%AE%B9%E5%99%A8%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20else%20%7B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20hxs%5Bi%5D.className%3Dhxs%5Bi%5D.tmpClass%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20boxsClass%5Bi%5D.className%3DboxsClass%5Bi%5D.tmpClass%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20%7D%20%0D%0A%0D%0A%7D%20%0D%0A%0D%0Atab(%22tab01%22%2C%22h3%22%2C%22div%22%2C%22%22%2C%22onclick%22%2C2)%3B%20%2F%2F%20%E4%BD%BF%E7%94%A8div%E4%B8%BA%E5%AE%B9%E5%99%A8%EF%BC%8C%E6%8C%87%E5%AE%9A%E4%BA%8B%E4%BB%B6%EF%BC%8C%E6%8C%87%E5%AE%9A%E5%BA%8F%E5%88%97%E3%80%82%20%0D%0A%0D%0Atab(%22tab02%22%2C%22h4%22%2C%22ol%22)%3B%20%2F%2F%20%E4%BD%BF%E7%94%A8ol%E4%B8%BA%E5%AE%B9%E5%99%A8%EF%BC%8C%E9%BB%98%E8%AE%A4%E4%BA%8B%E4%BB%B6%EF%BC%8C%E9%BB%98%E8%AE%A4%E5%BA%8F%E5%88%97%E3%80%82%20%0D%0A%0D%0Atab(%22tab03%22%2C%22h3%22%2C%22div%22%2C%22tab%22)%3B%20%2F%2F%20%E4%BD%BF%E7%94%A8div.tab%E4%B8%BA%E5%AE%B9%E5%99%A8%EF%BC%8C%E9%BB%98%E8%AE%A4%E4%BA%8B%E4%BB%B6%EF%BC%8C%E9%BB%98%E8%AE%A4%E5%BA%8F%E5%88%97%E3%80%82%20%0D%0A%0D%0A%2F%2F--%3E%20%0D%0A%0D%0A%3C%2Fscript%3E">

</body>

</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程