上海益国网络科技有限公司
上海专业网站建设一条龙服务

学无止境!

这里摘有最贴近网站程序使用的方方面面相关技术文档~

021-20906540
AM 9:30-12:00 PM:2:00-5:30
您当前位置:首页 >> 技术支持 >>  技术专辑 >>  滑动门-TAB切换

拉风琴式的JS滑动门

CSS:

#siqijitab { width:200px; margin:50px; border:solid #ccc; border-width:0 1px 1px; }

#siqijitab h4 { height:18px; line-height:18px; border:solid #ccc; border-width:1px 0; margin-bottom:-1px; text-align:center; background:#f6f6f6; cursor:pointer; }

#siqijitab h4.up { color:#c00; }

#siqijitab ol { display:none; height:54px; padding:5px; color:#666; }

#siqijitab ol.up { display:block; }




HTML:

<div id="siqijitab">

       <h4>首页</h4>

   <ol><li>第一框内容</li></ol>

       <h4 class="box">测试</h4>

   <ol><li>第2框内容</li></ol>

       <h4>无聊</h4>

   <ol><li>第3框内容</li></ol>

       <h4 class="bb">傻蛋</h4>

   <ol><li>第4框内容</li></ol>

</div>




JS:

<script type="text/javascript">

<!--

function Pid(id,tag){

       if(!tag){

               return document.getElementById(id);

               }

       else{

               return document.getElementById(id).getElementsByTagName(tag);

               }

}


function ppstab(id,hx,box,iClass,s,pr){

       var hxs=Pid(id,hx);

       var boxs=Pid(id,box);

       if(!iClass){ // 如果不指定class,则:

               boxsClass=boxs; // 直接使用box作为容器

       }

       else{ // 如果指定class,则:

               var boxsClass = [];

               for(i=0;i<boxs.length;i++){

                       if(boxs[i].className.match(/\btab\b/)){// 判断容器的class匹配

                               boxsClass.push(boxs[i]);

                       }

               }

       }

       if(!pr){ // 如果不指定预展开容器,则:

               go_to(0); // 默认展开序列

               yy();

       }

       else {

               go_to(pr);

               yy();

       }

       function yy(){

               for(var i=0;i<hxs.length;i++){

                       hxs[i].temp=i;

                       if(!s){// 如果不指定事件,则:

                               s="onmouseover"; // 使用默认事件

                               hxs[i][s]=function(){

                                       go_to(this.temp);

                               }

                       }

                       else{

                               hxs[i][s]=function(){

                                       go_to(this.temp);

                               }

                       }

               }

       }

       function go_to(pr){

               for(var i=0;i<hxs.length;i++){

                       if(!hxs[i].tmpClass){

                               hxs[i].tmpClass=hxs[i].className+=" ";

                               boxsClass[i].tmpClass=boxsClass[i].className+=" ";

                       }

                       if(pr==i){

                               hxs[i].className+=" up"; // 展开状态:标题

                               boxsClass[i].className+=" up"; // 展开状态:容器

                       }

                       else {

                               hxs[i].className=hxs[i].tmpClass;

                               boxsClass[i].className=boxsClass[i].tmpClass;

                       }

               }

       }

}

ppstab("siqijitab","h4","ol");

//-->

</script>



完整代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<title>拉风琴类的滑动门</title>
<style type="text/css">
<!--
* { margin:0; padding:0; font-size:12px; font-weight:normal; }
.jj  { font-weight:bolder!important; }
.box { border-top-color:#c00!important; }
.pr { color:#060!important; }
 
#siqijitab { width:200px; margin:50px; border:solid #ccc; border-width:0 1px 1px; }
#siqijitab h4 { height:18px; line-height:18px; border:solid #ccc; border-width:1px 0; margin-bottom:-1px; text-align:center; background:#f6f6f6; cursor:pointer; }
#siqijitab h4.up { color:#c00; }
#siqijitab ol { display:none; height:54px; padding:5px; color:#666; }
#siqijitab ol.up { display:block; }
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></head>
<body>
 
<div id="siqijitab">
        <h4>首页</h4>
    <ol><li>第一框内容</li></ol>
        <h4 class="box">测试</h4>
    <ol><li>第2框内容</li></ol>
        <h4>无聊</h4>
    <ol><li>第3框内容</li></ol>
        <h4 class="bb">傻蛋</h4>
    <ol><li>第4框内容</li></ol>
</div>
 
<script type="text/javascript">
<!--
function Pid(id,tag){
        if(!tag){
                return document.getElementById(id);
                }
        else{
                return document.getElementById(id).getElementsByTagName(tag);
                }
}
 
function ppstab(id,hx,box,iClass,s,pr){
        var hxs=Pid(id,hx);
        var boxs=Pid(id,box);
        if(!iClass){ // 如果不指定class,则:
                boxsClass=boxs; // 直接使用box作为容器
        }
        else{ // 如果指定class,则:
                var boxsClass = [];
                for(i=0;i<boxs.length;i++){
                        if(boxs[i].className.match(/\btab\b/)){// 判断容器的class匹配
                                boxsClass.push(boxs[i]);
                        }
                }
        }
        if(!pr){ // 如果不指定预展开容器,则:
                go_to(0); // 默认展开序列
                yy();
        }
        else {
                go_to(pr);
                yy();
        }
        function yy(){
                for(var i=0;i<hxs.length;i++){
                        hxs[i].temp=i;
                        if(!s){// 如果不指定事件,则:
                                s="onmouseover"; // 使用默认事件
                                hxs[i][s]=function(){
                                        go_to(this.temp);
                                }
                        }
                        else{
                                hxs[i][s]=function(){
                                        go_to(this.temp);
                                }
                        }
                }
        }
        function go_to(pr){
                for(var i=0;i<hxs.length;i++){
                        if(!hxs[i].tmpClass){
                                hxs[i].tmpClass=hxs[i].className+=" ";
                                boxsClass[i].tmpClass=boxsClass[i].className+=" ";
                        }
                        if(pr==i){
                                hxs[i].className+=" up"; // 展开状态:标题
                                boxsClass[i].className+=" up"; // 展开状态:容器
                        }
                        else {
                                hxs[i].className=hxs[i].tmpClass;
                                boxsClass[i].className=boxsClass[i].tmpClass;
                        }
                }
        }
}
ppstab("siqijitab","h4","ol");
//-->
</script>
</body>
</html>


做网站找动人网络!建站一条龙服务找动人网络!站长学习尽在站长培训网
  • jquery 滑动门随时间自动切换
  • TOP