仿126邮箱tab切换(展开+关闭)原生js实现切换效果

头像
牙小木木
    阅读 7 分钟

    仿照126

    目前大多基于bootstrap管理后台如ACE等，都已经集成常见需求。
    但是类似126邮箱这种没有找到。
    在此贴上原生js代码实现，有用之处copy即可。

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>仿照126邮箱tab效果</title>
<style>
*{ margin:0; padding:0; list-style:none;}
#box{ width:2000px; background:#ccc; margin:0 auto; overflow:hidden;}
#l{ width:200px; float:left; }
#l li{ width:198px; height:30px; font-size:24px; line-height:24px; text-align:center; font-weight:bold; margin-bottom:10px; border:1px solid blue; background:#9CF; cursor:pointer;}
#l .on{ background:#f90;}

#r{ width:1800px; float:right}
#rt{ width:1800px; height:50px; background:yellow; overflow:hidden;} 
#rt li{ width:180px; height:48px; line-height:48px; text-align:center; float:left; background:#fff; border:1px solid #000; margin-right:2px; position:relative; top:0; left:0;}
#rt li.active{ background:#f09;}
#rt li span{ position:absolute; top:0; right:0; height:20px; width:20px; background:#CCC; font-size:18px; text-align:center; line-height:20px; cursor:pointer;}
#rb{ width:1800px;}
#rb div{ width:500px; height:330px; text-align:center; line-height:330px; font-size:60px; font-weight:bold; background:#6F0;}

</style>
<script> 
window.onload=function(){
    var oUl=document.getElementById('l');
    var oRT=document.getElementById('rt');
    var oRB=document.getElementById('rb');
    var aLi=oUl.children;
    var arr=[];
    var bOk=false;
    var bOk2=false;
    for(var i=0;i<aLi.length;i++){
        (function(index){
            aLi[index].onclick=function(){
                for(var i=0;i<aLi.length;i++){
                    aLi[i].className='';    
                }    
                this.className='on';
                var aRTli=oRT.children;
                var aRBdiv=oRB.children;
                if(aRTli.length){//有length
                    for(var i=0;i<arr.length;i++){
                        if(arr[i].b==index){
                            bOk=true;
                        }
                    }
                    if(bOk){//如果遍历找到
                        for(var i=0;i<aRTli.length;i++){
                            aRTli[i].className='';
                            aRBdiv[i].style.display='none';    
                            
                        }
                        for(var i=0;i<arr.length;i++){
                            if(index==arr[i].b){
                                aRTli[arr[i].a-1].className='active';
                                aRBdiv[arr[i].a-1].style.display='block';    
                            }    
                        }
                    }else{//遍历找不到
                        var oLi=document.createElement('li');
                        oLi.innerHTML='<span id="close">X</span>'+aLi[index].innerHTML+'';
                        for(var i=0;i<aRTli.length;i++){
                            aRTli[i].className='';    
                        }
                        oLi.className='active';
                        oRT.appendChild(oLi);
                        //创建div
                        var oRBdiv=document.createElement('div');
                        oRBdiv.innerHTML='内容'+(index)+'';
                        for(var i=0;i<aRBdiv.length;i++){
                            aRBdiv[i].style.display='none';
                        }
                        oRBdiv.style.display='block';
                        oRB.appendChild(oRBdiv);
                        arr.push({a:aRTli.length,b:index});
                        oLi.n=(arr[aRTli.length-1]).a;
                        var oClose=oLi.children[0];
                        oClose.onclick=function(ev){
                            var oEvent=ev||event;
                            oRT.removeChild(this.parentNode);
                            oRB.removeChild(oRBdiv);
                            arr.splice((oLi.n-1),1);
                            for(var i=0;i<arr.length;i++){
                                arr[i].a=(i+1);
                                aRTli[i].n=i+1;
                            }
                            
                            //----------------------------------------开关
                            for(var i=0;i<aRTli.length;i++){
                                if(aRTli[i].className=='active'){
                                    bOk2=true;
                                }
                            }
                            if(!bOk2){
                                for(var i=0;i<aRBdiv.length;i++){
                                    aRBdiv[i].style.display='none';
                                    aRTli[i].className='';
                                }
                                for(var i=0;i<aLi.length;i++){
                                    aLi[i].className='';
                                }
                                aRTli[arr[arr.length-1].a-1].className='active';
                                aRBdiv[arr[arr.length-1].a-1].style.display='block';
                                aLi[arr[arr.length-1].b].className='on';
                            }
                            bOk2=false;
                            //选项卡
                            tab();
                            oEvent.cancelBubble=true;
                        };
                        //选项卡
                        tab();
                    }
                    bOk=false;
                    function tab(){
                        for(var i=0;i<aRTli.length;i++){
                            (function(index){
                                aRTli[index].onclick=function(){
                                    for(var i=0;i<aLi.length;i++){
                                        aLi[i].className='';
                                    }
                                    for(var i=0;i<aRTli.length;i++){
                                        aRTli[i].className='';
                                        aRBdiv[i].style.display='none';
                                    };
                                    this.className='active';
                                    aRBdiv[index].style.display='block';
                                    aLi[arr[index].b].className='on';
                                };
                            })(i);    
                        }
                    }
                }else{//没有length
                    var oLi=document.createElement('li');
                    oLi.innerHTML='<span id="close">X</span>'+aLi[index].innerHTML+'';
                    oLi.className='active';
                    oRT.appendChild(oLi);
                    //创建div
                    var oRBdiv=document.createElement('div');
                    oRBdiv.innerHTML='内容'+(index)+'';
                    oRB.appendChild(oRBdiv);
                    arr.push({a:1,b:index});
                    //删除
                    var oClose=oLi.children[0];
                    var oDiv=oRB.children[0];
                    oClose.style.display='none';
                }
            }
        })(i);    
    }
    
        
};
</script>
</head>

<body>
<div id="box">
    <ul id="l">
        <li>000</li>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
        <li>666</li>
        <li>777</li>
        <li>888</li>
        
    </ul>
    <div id="r">
        <ul id="rt">
            
        </ul>
        <div id="rb">
            
        </div>
    </div>
</div>
</body>
</html>
    javascript
    牙小木木
    1.5k 声望80 粉丝

    iamtb.cn

    « 上一篇
    结合php类三种属性说明is_callable和method_exists简单区别
    下一篇 »
    opencart 单入口文件简单分析

    引用和评论

    推荐阅读
    头像
    云原生架构设计理论与实践（14）

    牙小木木阅读 266

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 5.3k评论 3

    头像
    一些react使用小技巧（中）

    夕水赞 7阅读 4.1k评论 4

    头像
    如何在仓库中添加只对自己生效的.gitignore规则？

    热饭班长赞 4阅读 896

    头像
    面向企业级前端应用的开发框架 UI5 的发展简史介绍

    注销赞 5阅读 7.9k

    头像
    真是惭愧，直到今天，我才搞懂桶排序算法

    夕水赞 7阅读 5.4k

    头像
    EventLoop事件循环机制(浏览器和Node EventLoop)

    大卫talk赞 6阅读 2k

    0 条评论
    得票最新