纯CSS内页内容切换选项卡

2009-12-19 文本操作 ℃

<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>

相关特效代码

热门特效代码: 输入框的文字闪烁变色引人注意; 纯CSS内页内容切换选项卡; 鼠标经过链接显示注释旋转风火轮; 指向自动选择的输入框; 放大镜链接效果; 带注释的链接特效; 文字闪烁效果; 带注释的链接特效代码; 点击文字显示隐藏链接; WEB2.0圆形边框css做法

推荐特效代码: 字符连续消隐; 文字变色逐个出现; 段落文字百叶窗效果输出; 点击文字显示隐藏链接; 文字由小变大由大变小（动态变化; 文字来回上下移动或跳动