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

学无止境！

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

021-20906540

AM 9:30-12:00 PM:2:00-5:30

拉风琴式的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:

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

</div>

JS:

<!--

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>