文章列表内容tab选项卡切换特效

7个月前 (04-17 15:20)阅读回复0
管理员
发消息
注册排名1
经验值5294
级别管理员
主题1058
回复2
楼主
实用的选项卡切换特效，网页上的文章列表内页切换显示选项卡，点击标题内容立即切换显示，可根据自己的需求来自定义。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>文章列表内容tab选项卡切换特效_武鸣人</title>
<style type="text/css">
a img{border:0}
.hidden{display:none}/*隐藏*/
/*日记的选项卡*/
div.tab_wuming ul{margin:0;padding:0;list-style:none}
div.tab_wuming ul li{float:left;padding:0 5px 2px 0;}
div.tab_wuming ul li.s{padding-bottom:0;}
div.tab_wuming 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_wuming li.s a{background:#658A16;color:#E2F3B8;height:26px;padding-bottom:2px;font-weight:bold;cursor:default;}
div.tab_wuming a:hover{background:#658A16;color:#E2F3B8;text-decoration:underline;}
div.tab_wuming li.s a:hover{text-decoration:none;}
div.content{clear:both;border:solid 1px #658A16;border-width:5px 1px 1px;}
.STYLE3 {color: #FF0000}
</style>
<script type="text/javascript">
//<![CDATA[
$=function(id){return document.getElementById(id);}
var oldSelectedTabId = null;//上次选中的选项卡
/*初始化日记的选项卡*/
init_wwwwumingren=function(t){
  var tab_wuming = $(t);//取得选项卡标签对象
  if (!tab_wuming)return;//没有这个东东就退出
  var hs = tab_wuming.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]);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//切换选项卡 wuming.ren
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");//将当前选项卡的内容设置为不隐藏
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//取得对应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的对象
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//是否存在指定样式class
hasClass = function(obj,className){
  if (!obj||!obj.className)return false;//如果对象或者对象class不存在就退出
  return new RegExp("\\b"+className+"\\b","g").test(obj.className);//用正则判断对象是否有指定class
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//增加样式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，并去除头尾多余的空格
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//]]>
</script>
</head>
<body onload="init_wwwwumingren('tab_wuming')">
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div class="tab_wuming" id="tab_wuming">
 <ul>
  <li class="s"><a href="#study_www_wuming_ren" id="h_study">学习</a></li>
  <li><a href="#book_wwwwumingren" id="h_book">读书</a></li>
  <li><a href="#tech_www_wuming__ren" id="h_tech">技术</a></li>
 </ul>
</div>
<div class="content">
 <div id="c_study">
  <h3 class="goback">日记>><a href="https://www.wuming.ren" id="study_www_wuming_ren" title="跳转到该类日记">学习</a></h3>
  <ul class="diarylist">
   <li><a href="https://www.wuming.ren">第一学期考试过了:D(点击数:65)</a><span>2006-07-31 01:34 </span></li>
   <li><a href="https://www.wuming.ren">读书计划推迟(点击数:33)</a><span>2006-07-17 22:53 </span></li>
   <li><a href="https://www.wuming.ren">复习时间到~(点击数:51)</a><span>2006-07-17 12:20 </span></li>
   <li><a href="https://www.wuming.ren">第一次期末考试总结(点击数:40)</a><span>2006-07-07 23:00 </span></li>
  </ul>
 </div>
 <div id="c_book">
 <h3 class="goback">日记>><a href="https://www.wuming.ren" id="book_wwwwumingren" title="跳转到该类日记">读书</a></h3>
 <ul class="diarylist">
  <li><a href="https://www.wuming.ren">余华的《兄弟》(点击数:76)</a><span>2006-08-03 01:43 </span></li>
  <li><a href="https://www.wuming.ren">看完《鲸图腾》了(点击数:41)</a><span>2006-07-16 14:16 </span></li>
  <li><a href="https://www.wuming.ren">可可西里(点击数:26)</a><span>2004-12-11 13:37 </span></li>
  <li><a href="https://www.wuming.ren">看完《花妖》(点击数:29)</a><span>2004-09-24 16:38 </span></li>
  <li><a href="https://www.wuming.ren">《活着》(点击数:41)</a><span>2004-09-18 06:23 </span></li>
  <li><a href="https://www.wuming.ren">买了新碟(点击数:27)</a><span>2004-07-29 20:37 </span></li>
  <li><a href="https://www.wuming.ren">看完了《鸟的迁徙》(点击数:28)</a><span>2004-07-13 20:28 </span></li>
  <li><a href="https://www.wuming.ren">读书计划(点击数:47)</a><span>2004-07-12 20:06 </span></li>
  <li><a href="https://www.wuming.ren">终于看完了《我的死了的生活的回忆》(点击数:30)</a><span>2004-07-11 20:05 </span></li>
  <li><a href="https://www.wuming.ren">悟空传 读书笔记(点击数:30)</a><span>2004-07-08 12:15 </span></li>
 </ul>
 </div>
 <div id="c_tech">
 <h3 class="goback">日记>><a href="https://www.wuming.ren" id="tech_www_wuming__ren" title="跳转到该类日记">技术</a></h3>
 <ul class="diarylist">
  <li><a href="https://www.wuming.ren">QuiXplorer 2.3功能补强(点击数:14)</a><span>2006-08-22 01:11 </span></li>
  <li><a href="https://www.wuming.ren">许愿墙笔记(1):目录[草稿](点击数:27)</a><span>2006-08-21 14:48 </span></li>
  <li><a href="https://www.wuming.ren">许愿墙(点击数:68)</a><span>2006-08-19 03:00 </span></li>
  <li><a href="https://www.wuming.ren">我的pagerank查询接口(点击数:110)</a><span>2006-08-06 00:59 </span></li>
  <li><a href="https://www.wuming.ren">W3的幽默(点击数:91)</a><span>2006-08-02 23:28 </span></li>
 </ul>
 </div>
</div>
<p><a href="https://www.wuming.ren" target="new" class="STYLE3">武鸣人，各种信息免费发布，资源共享合作共赢！</a></p>
</body>
</html>
踩0
☆收藏0
本文来自武鸣人网站，转载请注明出处
本文地址：https://www.wuming.ren/a/751.html