一款很个性的蓝色JS+CSS选项卡代码

代码简介：

比较个性的网页选项卡，一改方方正正的风格，换为这种菱形的样式，看上去很生动，鼠标点击后切换，而非滑动门，代码段演示了在同一个网页中调用两个TAB选项卡，方便你的调用。

代码内容：

?
<!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>一款很个性的蓝色JS+CSS选项卡代码_网页代码站(www.webdm.cn)</title>
<style type="text/css">
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:12px auto 0
 
auto;width:600px;}
h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd,ul,ol{margin:0;padding:0;font-size:100%;}
ul{list-style:none;}
a{text-decoration:none;}
.display_none{display:none;}
/*选项卡的样式*/
.convention_tab{clear:both;width:100%;float:left;margin:15px 0 0 0;background:url
 
(http://www.webdm.cn/images/20090922/switch_area.gif) left bottom repeat-x;padding-
 
bottom:3px;overflow:hidden;padding-right:0px;}/*如果下面的区域是table，那么padding-right:2px;*/
    .convention_tab li{float:left;background:url(http://www.webdm.cn/images/20090922/switch_area.gif) right
 
top no-repeat;margin-left:-12px;padding:0 30px 0 11px;}
        .convention_tab li a,.convention_tab li.normal_tab b
 
{color:#fff;display:block;height:19px;float:left; background:#3C6084;padding-top:3px;}
    .convention_tab li.current_tab{background-position:right -100px;border-left:solid 2px #fff; padding-
 
bottom:2px;}
        .convention_tab li.current_tab a{background-color:#98B1C5;color:#000;}
    .convention_tab li.start_tab{margin-left:0;padding-left:0;border-left:none;}
        .convention_tab li.start_tab a{padding-left:10px;}
    .convention_tab li#end_tab{background-position:right -50px;}
        .convention_tab li#end_tab a{padding-left:10px;}
    .convention_tab li.current_tab#end_tab{background-position:right -140px;}
        .convention_tab li.current_tab#end_tab a{background-color:#98B1C5;}
    /*每个item*/
    #cardarea,#cardarea2{border:solid 1px #3D5F85;clear:both;border-top:none;}
        #cardarea p,#cardarea2 p{padding:20px;text-align:left;line-height:23px;}
    #cardarea2 dl{text-align:left;padding:20px;line-height:23px;}
</style>
</head>
<body>
<div class="container">
    <ul id="nav" class="convention_tab">
        <li class="start_tab current_tab"><a href="#">WebDm.Cn</a></li>
        <li><a href="#">代码更新</a></li>
        <li><a href="#">ASP源码</a></li>
        <li><a href="#">PHP更新</a></li>
        <li id="end_tab"><a href="#">VB更新</a></li>
    </ul>
    <div id="cardarea">
        <div class="item"><p>这里是div中的p标签，因为没有指定class为item，所以我不参与切换。</p></div>
        <p class="item display_none">我在页面加载完成后才添加的事件，可有的图片加载很慢，所以有时候可以
 
把外部js中的addLoadEvent(getConfigInputObj);删除掉，然后直接书写 getConfigInputObj();当然要放在</html>以
 
保证xhtml已经加载完毕</p>
        <p class="item display_none">看网上演示Jquery的tab插件更加强大，不过我这个更为实用，o(∩_∩)
 
o...。</p>
        <p class="item display_none">PHP更新的内容</p>
        <p class="item display_none">VB更新的内容</p>
    </div>
    <ul id="nav2" class="convention_tab">
        <li class="start_tab current_tab"><a href="/">网页代码站</a></li>
        <li><a href="#">使用方法</a></li>
        <li><a href="#">下载排行</a></li>
        <li><a href="#">代码分类</a></li>
        <li id="end_tab"><a href="#">最后一个</a></li>
    </ul>
    <div id="cardarea2">
        <p class="item">重用性极高,在IE6+,Firefox2+,Opera9中均能正常工作，且并没有使用hack。</p>
        <p class="item display_none"> <span style="font-family:Georgia, 'Times New Roman', Times,
 
serif;"> <input type="hidden" id="kp_OtherRegional"
 
value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab" title="这个必不可少" /> </span>
 
即可完成事件添加,多个区域用竖线隔开。</p>
            <div class="item display_none">
            <dl>
                <dt>id为kp_OtherRegional的input元素共有5个参数</dt>
                <dd>第一个:表示id为nav的那个元素。</dd>
                <dd>第二个:获取到第一步的元素，遍历指定的元素，这取决于你写的什么标签，写的li它
 
就会遍历li。</dd>
                <dd>第三个:切换区域的父容器,切换区域的父容器ID</dd>
                <dd>第四个:<p class="item",这里没有限定是什么元素，而是限定带有指定class的才
 
能参与切换。</dd>
                <dd>第五个:切换标签后当前标签的样式名。</dd>
            </dl>
        </div>
        <p class="item display_none">这里是第四个区域</p>
        <p class="item display_none">第五个</p>
    </div>
</div>
<input type="hidden" id="kp_OtherRegional"
 
value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab" title="这个必不可少" />
<script type="text/javascript">
/*addLoadEvent.js*/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
/*addLoadEvent.js结束*/
/*switch_display_area.js*/
function getConfigInputObj(){
    if(!document.getElementById || !document.getElementsByTagName)return;
    var configObj=document.getElementById("kp_OtherRegional");if(configObj==null)return;
    var configValue=configObj.getAttribute("value").replace(/\s/g,"");
    var configArray=configValue.split("|")
    var length=configArray.length;
    var childConfigArray=null;
    var childConfigValue="";
    for(var i=0;i<length;i++){
        childConfigArray=configArray[i].split(",");
        giveEvent(childConfigArray);
    }
    //destroy(getConfigInputObj);
}
function giveEvent(obj){
    if(obj==null){return;}
    var parentId=obj[0];
    var whichToTrigger=obj[1];
    var itemParent=obj[2];
    var itemClass=obj[3];
    var currentClassName=obj[4];
    var listerEvent=obj[5];
    if(!parentId || !whichToTrigger || !itemParent || !itemClass)return;
    var parentObj=null;
    var whichToTriggerObj=null;
    var itemParentObj=null;
    var itemObj=null;
    /*准备好各个元素*/
    parentObj=document.getElementById(parentId);
    if(!parentObj){return;}
    itemParentObj=document.getElementById(itemParent);
    whichToTriggerObj=parentObj.getElementsByTagName(whichToTrigger);//获取事件源对象的集合
    if(!parentObj || !itemParentObj || !whichToTriggerObj)return;
    itemObj=itemParentObj.getElementsByTagName("*");
    var length=itemObj.length;
    var objArray=new Array();
    for(var i=0;i<itemObj.length;i++){
        if(itemObj[i].className.indexOf(itemClass)>-1){
            objArray.push(itemObj[i]);
        }
    }
    var whichToTriggerObjLength=whichToTriggerObj.length;//获取事件源对象的长度
    var isExistAObj=null;
    for(var i=0;i<whichToTriggerObjLength;i++){
        whichToTriggerObj[i].setAttribute("oldClassName",whichToTriggerObj[i].className.replace
 
(currentClassName));
        whichToTriggerObj[i].setAttribute("currentNum",i);
        if(listerEvent==null){
            whichToTriggerObj[i].onclick=function(){
                //return
                return correspondingRegion(this,objArray,currentClassName,whichToTriggerObj);
            }
            isExistAObj=whichToTriggerObj[i].getElementsByTagName("a");
            if(isExistAObj.length>0){
                for(var j=0;j<isExistAObj.length;j++){
                    isExistAObj[j].onfocus=function(){this.blur();}
                }
            }
        }else{
            whichToTriggerObj[i].onmouseover=function(){
                //return
                return correspondingRegion(this,objArray,currentClassName,whichToTriggerObj);
            }
        }
        whichToTriggerObj[i].onfocus=function(){
            this.blur();
        }
    }
    //destroy(giveEvent);
}
//功能; 根据传递的参数切换（显示或隐藏）各个区域
function correspondingRegion(obj,objArray,currentClassName,whichToTriggerObj){
    var length=objArray.length;
    var currentNum=parseInt(obj.getAttribute("currentNum"),10);
    if(!objArray[currentNum]){
        /*alert("该div不存在");*/
        return;
    }else{
        /*先将所有样式 “归零”*/
        for(var i=0;i<length;i++){
            objArray[i].style.display="none";
            if(whichToTriggerObj[i]==null){continue;}
            //如果有老的样式
            if(whichToTriggerObj[i].getAttribute("oldClassName")!="" && whichToTriggerObj
 
[i].getAttribute("oldClassName").indexOf(currentClassName)<0){
                whichToTriggerObj[i].className=whichToTriggerObj[i].getAttribute
 
("oldClassName");
            }else if(whichToTriggerObj[i].getAttribute("oldClassName")!=""){
                whichToTriggerObj[i].className=whichToTriggerObj[i].getAttribute
 
("oldClassName");
            }else{
                whichToTriggerObj[i].className="";
            }
        }
        //然后单独给当前对象加上className
        if(objArray[currentNum]!=null){
            objArray[currentNum].style.display="block";
            if(obj.getAttribute("oldClassName")!=""){
                obj.className=currentClassName+" "+obj.getAttribute("oldClassName");
            }else{
                obj.className=currentClassName;
            }
            //return false;
        }else{
            //return true;
        }
        return false;
    }
}
addLoadEvent(getConfigInputObj);
/*switch_display_area.js结束*/
</script>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

代码来自：http://www.webdm.cn/webcode/b2d1d707-a6a0-403a-9ef9-6e4820c62d24.html

posted @   网页代码站  阅读(592)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示