又一个Css+JS清新的选项卡、滑动门

2024-09-05 12:19:26

字体：大中小

来源：转载

供稿：网友

效果很不错的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>选项卡及滑动门</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;	width:580px;	text-align:left;	font-size:14px;	color:#996600;}.tabWrap {	width: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>往事</li>		<li>心情</li>		<li>回忆</li>		<li>岁月</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>往事</li>		<li>心情</li>		<li>回忆</li>		<li>岁月</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>

上一篇：JS操作Cookie实现菜单位置保存

下一篇：点击单选框切换对应的菜单