location.hash 利用锚点的Tab选项卡

有时候 www.xxx.com/index.htm#page3 ，通过这个#(锚)后面的参数来决定页面打开以后默认展开的内容

 

<!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=gb2312" />
<title>Tab ？</title>
<style type="text/css">
li.up { color:red; }
div.up { height:auto!important; overflow:visible!important; }
div.tab_list { height:0; overflow:hidden; }
</style>
</head>
<body>
<ul>
    <li class="tab_nav"><a href="#page1">索引一</a></li>
    <li class="tab_nav"><a href="#page2">索引二</a></li>
    <li class="tab_nav"><a href="#page3">索引三</a></li>
</ul>

<div id="page1" class="tab_list">
    <h2>标题一</h2>
    <p>内容一</p>
</div>
<div id="page2" class="tab_list">
    <h2>标题二</h2>
    <p>内容二</p>
</div>
<div id="page3" class="tab_list">
    <h2>标题三</h2>
    <p>内容三</p>
</div>

<script type="text/javascript">
var tab={}
tab.css=function(name){
    var obj=document.getElementsByTagName("*"),list=[],cssName=new RegExp('\\b'+name+'\\b','g');
    for(var i=0;i<obj.length;i++){if(obj[i].className.match(cssName)){list.push(obj[i]);}}
    return list;
}
tab.obj=function(a,b,c,d){
    var d=(!d)?0:d;
    var hs=this.css(a),bs=this.css(b);
    this.on(hs,bs,c);
    this.mm(a,b,c,d);
}
tab.$=function(a,b,css,x){
    var h=this.css(a),b=this.css(b),z=new RegExp("\\b"+css+"\\b","g");
    for(var i=0;i<h.length;i++){
        h[i].className=(i==x)?(h[i].className+" "+css):h[i].className.replace(z,"");
        b[i].className=(i==x)?(b[i].className+" "+css):b[i].className.replace(z,"");
    }
}
tab.on=function(h,b,css){
    for(var i=0;i<h.length;i++){
        h[i].onclick=new Function("document.location.hash=this.firstChild.hash;tab.mm('"+h[i].className+"','"+b[i].className+"','"+css+"');return false;")
    }
}
tab.mm=function(a,b,c,d){
    var x=(!document.location.hash || document.location.hash.match(/[0-9]$/ig)==null)?"0":document.location.hash.match(/[0-9]$/ig)-1;
    this.$(a,b,c,x);
}
tab.obj("tab_nav","tab_list","up")
</script>
</body>
</html>

 

 

 

posted @ 2013-09-10 10:39  赵小磊  阅读(741)  评论(0)    收藏  举报
回到头部