【教程】Css+Js写的清新选项卡、滑动门代码
代码简介:效果很不错的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; 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> </body> </html> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
代码来自:http://www.webdm.cn/webcode/9984b4e8-9223-4476-aa9b-7fbd66704a34.html