网页制作特效代码园地
纯CSS内页内容切换选项卡
www.qpsh.com 更新日期：2007-9-4 人气指数 3171
<html> <head> <title>纯CSS内页内容切换选项卡-www.qpsh.com</title> <style type="text/css"> a img{border:0} .hidden{display:none}/*隐藏*/ /*日记的选项卡*/ div.tab ul{margin:0;padding:0;list-style:none} div.tab ul li{float:left;padding:0 5px 2px 0;} div.tab ul li.s{padding-bottom:0;} div.tab a{text-align:center;width:40px;display:block;text-decoration:none;color:#658A16;background:#E2F3B8;padding:2px 5px;height:20px;line-height:20px;} div.tab li.s a{background:#658A16;color:#E2F3B8;height:26px;padding-bottom:2px;font-weight:bold;cursor:default;} div.tab a:hover{background:#658A16;color:#E2F3B8;text-decoration:underline;} div.tab li.s a:hover{text-decoration:none;} div.content{clear:both;border:solid 1px #658A16;border-width:5px 1px 1px;} </style> <script type="text/javascript"> //<![CDATA[ $=function(id){return document.getElementById(id);} var oldSelectedTabId = null;//上次选中的选项卡 /*初始化日记的选项卡*/ initTab=function(t){ var tab = $(t);//取得选项卡标签对象 if (!tab)return;//没有这个东东就退出 var hs = tab.getElementsByTagName('a');//取得所有的超链接 var l = hs.length;//超链接长度 for (var i = 0;i < l ;i++ ){//遍历超链接 var a = hs[i];//取得一个超链接 a.onclick=function(ev){//设置超链接的onclick事件 this.blur();//先把超链接的焦点去了…… toggleTab(this);//单击选项卡标签时，切换选项卡,调用自定义函数toggleTab } if (hasClass(a.parentNode,"s"))//如果这个超链接的上一层（li）的class是s的话 toggleTab(a);//如果当前超链接是被选中的标签，切换选项卡 else addClass(getTabObj(a.id,"content"),"hidden");//如果当前标签未被选中，隐藏当前标签显示内容 a.href="javascript:void(0)"//将当前超链接的href清除，避免url中出现#... } if (!oldSelectedTabId)//如果没设置默认选中标签，则认为第一个标签被选中 toggleTab(hs[0]); } //切换选项卡 toggleTab = function(a){ if (!a)return;//如果没有对象，退出（可能的情况，选项卡为空……） if (oldSelectedTabId&&oldSelectedTabId==a.id)return;//如果还是选择当前选项卡，直接退出 else if (oldSelectedTabId){//如果之前选择过选项卡标签而且不是当前选项卡 removeClass(getTabObj(oldSelectedTabId,"href").parentNode,"s");//移除超链接上一层的被选中样式 addClass(getTabObj(oldSelectedTabId,"content"),"hidden");//设置之前被选中选项卡内容隐藏 } addClass(a.parentNode, "s");//设置该超链接上一层为被选中 oldSelectedTabId = a.id;//设置之前被选中选项卡为当前选项卡 removeClass(getTabObj(a.id,"content"),"hidden");//将当前选项卡的内容设置为不隐藏 } //取得对应id的对象 getTabObj=function(id,type){//用来将给定的id替换成正确的id var TYPE = {content:"c_",href:"h_"}//类型:内容（content）和超链接(href) var r = /(c_|h_)/g//用于替换的正则 return $(id.replace(r,TYPE[type]));//返回对应id的对象 } //是否存在指定样式class hasClass = function(obj,className){ if (!obj||!obj.className)return false;//如果对象或者对象class不存在就退出 return new RegExp("\\b"+className+"\\b","g").test(obj.className);//用正则判断对象是否有指定class } //增加样式class addClass = function(obj,className){ if (!obj)return false;//如果对象不存在就退出 obj.className = obj.className + " " + className+" ";//给对象增加class } //删除指定样式class removeClass = function(obj,className){ if (!obj||!obj.className)return false;//如果对象或者对象class不存在就退出 obj.className = obj.className.replace(new RegExp("\\b"+className+"\\b","g"),"").replace(/^\s*|\s$/g,"")//用正则替换掉原来的不要的class，并去除头尾多余的空格 } //]]> </script> </head> <body onload="initTab('tab')"> <div class="tab" id="tab"> <ul> <li class="s"><a href="#href_study" id="h_study">学习</a></li> <li ><a href="#href_book" id="h_book">读书</a></li> <li ><a href="#href_tech" id="h_tech">技术</a></li> </ul> </div> <div class="content"> <div id="c_study"> <h3 class="goback">日记>><a href="###" id="href_study" title="跳转到该类日记">学习</a></h3> <ul class="diarylist"> <li><a href="###">第一学期考试过了:D(点击数:65)</a><span>2006-07-31 01:34 </span></li> <li><a href="###">读书计划推迟(点击数:33)</a><span>2006-07-17 22:53 </span></li> <li><a href="###">复习时间到~(点击数:51)</a><span>2006-07-17 12:20 </span></li> <li><a href="###">第一次期末考试总结(点击数:40)</a><span>2006-07-07 23:00 </span></li> </ul> </div> <div id="c_book"> <h3 class="goback">日记>><a href="###" id="href_book" title="跳转到该类日记">读书</a></h3> <ul class="diarylist"> <li><a href="###">余华的《兄弟》(点击数:76)</a><span>2006-08-03 01:43 </span></li> <li><a href="###">看完《鲸图腾》了(点击数:41)</a><span>2006-07-16 14:16 </span></li> <li><a href="###">可可西里(点击数:26)</a><span>2004-12-11 13:37 </span></li> <li><a href="###">看完《花妖》(点击数:29)</a><span>2004-09-24 16:38 </span></li> <li><a href="###">《活着》(点击数:41)</a><span>2004-09-18 06:23 </span></li> <li><a href="###">买了新碟(点击数:27)</a><span>2004-07-29 20:37 </span></li> <li><a href="###">看完了《鸟的迁徙》(点击数:28)</a><span>2004-07-13 20:28 </span></li> <li><a href="###">读书计划(点击数:47)</a><span>2004-07-12 20:06 </span></li> <li><a href="###">终于看完了《我的死了的生活的回忆》(点击数:30)</a><span>2004-07-11 20:05 </span></li> <li><a href="###">悟空传 读书笔记(点击数:30)</a><span>2004-07-08 12:15 </span></li> </ul> </div> <div id="c_tech"> <h3 class="goback">日记>><a href="###" id="href_tech" title="跳转到该类日记">技术</a></h3> <ul class="diarylist"> <li><a href="###">QuiXplorer 2.3功能补强(点击数:14)</a><span>2006-08-22 01:11 </span></li> <li><a href="###">许愿墙笔记(1):目录[草稿](点击数:27)</a><span>2006-08-21 14:48 </span></li> <li><a href="###">许愿墙(点击数:68)</a><span>2006-08-19 03:00 </span></li> <li><a href="###">我的pagerank查询接口(点击数:110)</a><span>2006-08-06 00:59 </span></li> <li><a href="###">W3的幽默(点击数:91)</a><span>2006-08-02 23:28 </span></li> </ul> </div> </div> <p><a href="http://www.qpsh.com" target='new'>网页特效</a></p> </body> </html>
【返回首页】【刷新本页】【返回顶部】【关闭本页】
本类热门
8/31/2007
9/8/2007
9/4/2007
8/3/2008
12/25/2007
本类最新
6/19/2008
12/28/2007
12/23/2007
最具人气
36022
22797
18792
17991
17768
14365
14231
12150
常用特效
2474
5183
2408
2435
2998
2439
3793
推荐特效
3403
6665
2267
1739
5148
10746
11603
2904
CopyRight © 网页特效代码 2006 - 2007 Qpsh.Com All rights reserved
