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

 首页 > 网页特效 > 菜单特效 > 又一个Css+JS清新的选项卡、滑动门

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

 2018-07-18  360  收藏  0 赞一个  0 真差劲  0 去评论

<!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=utf-8">
<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><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>

<!-- 以下与演示代码无关,使用时请移除. --> 
	<style type="text/css">
	#azz_discription{ width:600px; height:auto; border:1px dashed #CCC; margin:0 auto; padding:10px;}
	#azz_discription p{ line-height:25px;}
	</style>
	<div style="height:20px;"></div>
	<div id="azz_discription">
	<p style="text-align:center;">来源：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a>　代码整理：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a></p>
	<p>&hearts;尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
	</div>

<!-- 以上与演示代码无关,使用时请移除. --> 


</body>
</html>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

效果很不错的WEB网页TAB选项卡，另附一款滑动门，其实选项卡和滑动门的区别就是鼠标是否点击触发，如果鼠标滑过就触发的话那就是滑动门，点击触发也就是选项卡，两者结构及CSS几乎相同，不同在JS的的触发事件上，仔细看一下就会发现不同了。

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行