css内容切换选项卡

最新推荐文章于 2023-09-19 22:46:12 发布

bell123987

最新推荐文章于 2023-09-19 22:46:12 发布

阅读量804

点赞数

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>纯CSS内页内容切换选项卡</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:#fff;
   background:#97CBFF;
   padding:2px 5px;
   height:20px;
   line-height:20px;
   }
div.tab li.s a{
   background:#2894FF;
   color:#fff;
   height:26px;
   padding-bottom:2px;
   font-weight:bold;
   cursor:default;
   }
div.tab a:hover{
   background:#2894FF;
   color:#fff;
   text-decoration:underline;
   }
div.tab li.s a:hover{
   text-decoration:none;
   }
div.content{
   clear:both;
   border:solid 1px #2894FF;
   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.οnclick=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 οnlοad="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">
             <ul class="diarylist">
                  <li> 读书计划推迟 </li>
                 <li> 复习时间 </li>
                 <li> 第一次期末考试总结 </li>
            </ul>
       </div>
       <div id="c_book">
            <ul class="diarylist">
                <li> 余华的《兄弟》 </li>
                <li> 看完《鲸图腾》了 </li>
                <li> 可可西里 </li>
            </ul>
       </div>
       <div id="c_tech">
            <ul class="diarylist">
                <li> QuiXplorer 2.3功能补强 </li>
                <li> 许愿墙笔记 </li>
                <li> 许愿墙 </li>
                <li> 我的pagerank查询接口 0) </li>
                <li> W3的幽默 </li>
           </ul>
       </div>
</div>

</body>
</html>

bell123987

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css内容切换选项卡

纯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
复制链接

扫一扫