代码简介：效果很不错的WEB网页TAB选项卡，另附一款滑动门，其实选项卡和滑动门的区别就是鼠标是否点击触发，如果鼠标滑过就触发的话那就是滑动门，点击触发也就是选项卡，两者结构及CSS几乎相同，不同在JS的的触发事件上，仔细看一下就会发现不同了。
代码内容：
<!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>【教程】Css+Js写的清新选项卡、滑动门代码_网页代码站(www.webdm.cn)</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
* {margin:0;padding:0;}
ul,ol {list-style:none;}
body {
font-family:"Verdana","宋体","Arial","sans-serif";
color:#333333;
min-height:1000px;
_height:1000px;
}
h1 {
margin:10px;
text-align:center;
}
h2 {
margin:10px auto;
580px;
text-align:left;
font-size:14px;
color:#996600;
}
.tabWrap {
580px;
padding:10px;
margin:0 auto;
}
.tab {zoom:1;}
.tab:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.tab li {
float:left;
margin-right:2px;
}
.tab li a {
float:left;
padding:5px 15px;
color:#ffffff;
font-size:12px;
text-decoration:none;
background:#6633FF;
}
.tab li a:hover {
background:#580099;
}
.tab li a.lh,
.tab li a.lh:hover {
background:#000;
}
.entry {
padding:10px;
line-height:1.8;
font-size:14px;
border:solid #000 3px;
}
p {
margin:8px 0;
}
.entry p {
text-indent:2em;
}
</style>
<script type="text/javascript">
function $get(el) {
if(el) {
if(el.nodeType) {
return el;
}else if(typeof(el) === 'string') {
return document.getElementById(el);
}else if(length in el) {
var els = [];
for(var i=0, l = el.length; i < l; ++i) {
els.push($get(el[i]));
}
return els;
}
return el;
}
return null;
}
function $class(classname,parentWrap){
var rs=[],
myclass = new RegExp("\\b"+classname+"\\b"),
elem = ($get(parentWrap) || document).getElementsByTagName("*");
for(var h=0,l=elem.length;h<l;++h){
var classes = elem[h].className;
if(myclass.test(classes)){rs.push(elem[h]);}
}
return rs;
}
function addClass(ele,v) {
if(!ele.className) {
ele.className = v;
} else if(!hasClass(ele,v)) {
ele.className += ' '+v;
} else {
return false;
}
}
function removeClass(ele,v) {/*----- 移除样式 -----*/
var cn = ele.className;
if(cn) {
var delclass = new RegExp('\\b'+v+'\\b','ig');
if(delclass.test(cn)) {
ele.className = cn.replace(delclass,"");
}
}
}
function hasClass(ele,classname) {
var cn = ele.className;
var rgExp = new RegExp('\\b'+classname+'\\b');
return cn.match(rgExp);
}
function insertAfter(newElement,tarElement) {
var pnode = tarElement.parentNode;
if (pnode.lastChild == tarElement) {
pnode.appendChild(newElement);
} else {
pnode.insertBefore(newElement,tarElement.nextSibling);
}
}
function prepend(element,tarElement) {
if(tarElement.firstChild) {
tarElement.insertBefore(element,tarElement.firstChild);
}else {
tarElement.appendChild(element);
}
}
function wrap(newparent,ele) {
if(ele.nextSibling) {
var n = ele.nextSibling;
n.parentNode.insertBefore(newparent,n);
}else if(ele.previousSibling) {
insertAfter(newparent,ele.previousSibling);
}else {
ele.parentNode.appendChild(newparent);
}
newparent.appendChild(ele);
}
function clearDefault(ev) {
ev=window.event?window.event:ev;
if(ev.preventDefault) {
ev.preventDefault();
}else {
ev.returnValue = false;
}
}
function addEvent(tar,ev,fn) {
if(document.attachEvent) {
tar.attachEvent('on'+ev,fn);
}else if(document.addEventListener) {
tar.addEventListener(ev,fn,false);
}
}
function removeEvent(tar,ev,fn) {
if(document.detachEvent) {
tar.detachEvent('on'+ev,fn);
}else if(document.removeEventListener) {
tar.removeEventListener(ev,fn,false);
}
}
function CatTab(el,args) {
this.el = $get(el);
if(!this.el) {return false;}
this.links = this.el.getElementsByTagName('a');
this.ajaxLoad = args.ajaxLoad;
if(this.ajaxLoad) {
this.ajaxWrap = $get(args.ajaxWrap);
this.ajaxWrapName = 'ctTabAxWrap';
this.ajaxLoading = args.ajaxLoading;
this.ajaxLoadsucc = args.ajaxLoadsucc;
this.ajaxLoadfail = args.ajaxLoadfail;
}
this.focusClass = args.focusClass || 'lh';
this.bindEv = args.mode || 'mouseover';
this.nTab = new Object();
this.ini();
}
CatTab.prototype = {
ini:function (e) {
var self = this;
for(var i=0, l = this.links.length; i < l; ++i) {
var lk = this.links[i],
lc = hasClass(lk,this.focusClass), //检测默认高亮的连接
lts = lk.getAttribute('href',2).split('#'),
lt = lts[1],
wel = $get(lt);
if(lc) {this.nTab = lk;} //储存
if(wel) {
if(!lc) {
wel.style.display = 'none';
}else {
wel.style.display = '';
}
}
if((!lts[0] || this.bindEv == 'click') && lt) { //取消点击默认事件
addEvent(lk,'click',clearDefault);
}
if(!e) {
if(!this.ajaxLoad) {
lk.setAttribute('href',lts[0]);
lk.v_catTab = lt;
addEvent(lk,this.bindEv,function (e) {self.showTab(e)});
}else {
var tarid = this.ajaxWrapName+i;
var anwrap = document.createElement('div');
anwrap.style.display = 'none';
this.ajaxWrap.appendChild(anwrap);
lk.v_catTab = anwrap;
lk['on'+self.bindEv] = function (e) {self.showAjaxTab(e)};
}
}
}
if(!this.nTab.nodeType){//默认为首个tab
this.nTab = this.links[0];
}
if(!this.ajaxLoad) {
this.showTab(this.nTab);
}else {
this.showAjaxTab(this.nTab);
}
},
getObj:function (e) {
var o;
var e = window.event || e;
if(!$get(e).nodeType) {
o = e.srcElement || e.target;
while(o.tagName.toLowerCase() != 'a') { // 修正子结点非为a的问题
o = o.parentNode;
}
}else {
o = $get(e);
}
return o;
},
showTab:function (e) {
var obj = this.getObj(e);
var oldtb = $get(this.nTab.v_catTab),
newtb = $get(obj.v_catTab);
if(oldtb && newtb) {//隐藏原tab
oldtb.style.display = 'none';
removeClass(this.nTab,this.focusClass);
}
if(newtb) {//显示新tab
addClass(obj,this.focusClass);
newtb.style.display = '';
this.nTab = obj;//设置ntb为新的ntb
}
},
showAjaxTab:function (e) {
var self = this,
obj = self.getObj(e),
objlink=obj.getAttribute('href'),
oldtb = $get(self.nTab.v_catTab),
newtb = $get(obj.v_catTab);
grabFile(objlink.split('#')[0],{
loading:function (rs) {
if(self.ajaxLoading) {
self.ajaxLoading(newtb);
}else {
newtb.innerHTML = '加载中...';
}
oldtb.style.display = 'none';
newtb.style.display = '';
removeClass(self.nTab,self.focusClass);
addClass(obj,self.focusClass);
self.nTab = obj;
},
success:function (rs) {
var rstext = rs.responseText;
if(self.ajaxLoadsucc) {
self.ajaxLoadsucc(newtb,rstext);
}else {
newtb.innerHTML = rstext;
}
obj['on'+self.bindEv] = function (e) {self.showTab(e);}
},
fail:function (rs) {
if(self.ajaxLoadfail) {
self.ajaxLoadfail(newtb);
}else {
newtb.innerHTML = '加载失败';
}
}
});
}
}
function catTab(el,args) {
if(typeof(el) !== 'string' && (length in el)) {
for(var i=0, l = el.length; i < l; ++i) {
(function () {
var v_catTab = new CatTab(el[i],args);}
)();
}
}else {
(function () {
var v_catTab = new CatTab(el,args);
})();
}
}
</script>
</head>
<body>
<div class="tabWrap">
<p>滑过触发：</p>
<ul class="tab" id="TabDemo">
<li><a href="#d1" target="_blank" title="">往事</a></li>
<li><a href="#d2" title="">心情</a></li>
<li><a href="#d3" title="">回忆</a></li>
<li><a href="#js" title="">岁月</a></li>
</ul>
<div class="entry">
<div class="tdwrap" id="d1"><p>往事像一首歌。</p></div>
<div class="tdwrap" id="d2"><p>心情需要自己调节</p></div>
<div class="tdwrap" id="d3"><p>回忆是美好的。</p></div>
<div class="tdwrap" id="js"><p>岁月不因你的挽留而停止。</p></div>
</div>
</div>
<div class="tabWrap">
<p>点击触发：</p>
<ul class="tab" id="TabDemo_2">
<li><a href="#d1_2" target="_blank" title="">往事</a></li>
<li><a href="#d2_2" title="">心情</a></li>
<li><a href="#d3_2" title="">回忆</a></li>
<li><a href="#js_2" title="" class="lh">岁月</a></li>
</ul>
<div class="entry">
<div class="tdwrap" id="d1_2"><p>往事像一首歌。</p></div>
<div class="tdwrap" id="d2_2"><p>心情需要自己调节。</p></div>
<div class="tdwrap" id="d3_2"><p>回忆是美好的</p></div>
<div class="tdwrap" id="js_2"><p>岁月不因你的挽留而停止。</p>
</div>
</div>
</div>
<script type="text/javascript">
catTab('TabDemo',{
focusClass:'lh',
mode:'mouseover'
});
catTab('TabDemo_2',{
focusClass:'lh',
mode:'click'
});
</script>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>
代码来自：http://www.webdm.cn/webcode/9984b4e8-9223-4476-aa9b-7fbd66704a34.html