纯CSS内页内容切换选项卡

来源：互联网发布：三星淘宝用不了编辑：程序博客网时间：2024/04/30 09:27

<html>
<head>
<title>纯CSS内页内容切换选项卡-www.zlcool.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.zlcool.com" target='new'>网页特效</a></p>
</body>
</html>