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

最新推荐文章于 2022-05-27 09:49:17 发布
最新推荐文章于 2022-05-27 09:49:17 发布
阅读量210 收藏
点赞数
原文链接：https://segmentfault.com/a/1190000004076365
版权

仿照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>
weixin_34112030
关注
统信系统UOS桌面版V20 用户手册
Reyn_观极
07-27 1万+
UOS桌面版V20用户手册。
前端面试题
热门推荐
qq_41887655的博客
08-08 2万+
前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? 21 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 21 Quirks模式是什么？它和Standards模式有什么区别 21 div+css的布局较table布局有什么优点？ 22 img的alt与title有何异同？ strong与em的异同？ 22 你能...
应用系统页面框架的源码（仿126邮箱）V1.1
12-10
本资源是一个使用eclipse工具开发的模仿126邮箱的应用系统框架，分享目的在于和大家交流。 上传的是eclipse项目压缩包，在解压后可以使用eclipse作为Dynamic Web Project直接导入，导入后可以发布到web应用服务器(如Tomcat)看效果。 效果请看： http://hi.csdn.net/attachment/201012/10/5271_1291966562WHmJ.jpg 项目结构说明请看： http://hi.csdn.net/attachment/201012/10/5271_1291966569mXy3.jpg
Tab选项卡的实现（实例 仿126邮箱）
05-24
仿126邮箱的Div实现Tab选项卡经典实例，直接替换要显示的内容就行，没学过编程的人都会用。
效仿126邮箱tabcontrol的界面框架
TonyWang的专栏
12-11 2991
***************图书推荐*************************************************************************************
仿126邮箱公用界面.rar
05-27
这是本人效仿126邮箱界面在美工的配合下做的一公用界面、基本上适合很多信息管理系统的界面要求。本人的CSS和JAVASCIRPT的功底有限，开发的东西难免会有些BUG或者很肤浅的地方，希望和朋友们一起探讨解决其中的一些问题。也非常希望高手们优化我JS。 QQ：10646337，接头暗号：“为人民服务”  我不回答任何提问，只接受高手的指点。 功能介绍： 1、可以换皮肤、其中住框架、具体页面可以统一使用皮肤。 2、tab页标题有右键菜单，新开、全屏打开，刷新。双击标题也可以刷新。 3、可以收放菜单栏。 使用方法： 基本上主框架页面不需要作任何的变动了，直接就可以用，就不讲了。 在这里主要讲一下使用tabControl： tabControl新开一个页面实际上是通过JS在主显示区域建立一个iframe 把这个iframe的src 指向我们指定的页面。
仿126邮箱的页面设计
12-14
这是完全模仿126邮箱的页面进行设计的，整个页面挺和谐的，不会浪费你的分的。
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
qq_36609655的博客
07-02 1万+
第1章Html   Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。 就是给文本加上含有语义的标签。 接下来应该学习更多具体语义标签： 一、结构（固定的结构）   &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;bod...
高仿淘宝首页 - 刚把CSS和JS弄出成了外部，原本写的时候都在HTML一个文件里哈
InterestingLife的博客
05-12 4663
自己仿照淘宝首页作的网页，脚本全是用的纯javascript写的，没有套框架。感觉用原生js更能加深对知识的理解哈。小白一枚。本来CSS和JS都写在HTML一个文件里了。这刚把它们弄出来成外部了。先上网页截图哈现在上代码哈，先HTML：&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF...
超酷的Qt消息提示框，仿126邮箱登录提示
12-04
最近正在学习Qt，根据实际业务需求花了一天的时候制作了一个消息提示框，仿造126邮箱登录的提示。第一次开源发布代码，还请高手轻拍，并请留下宝贵意见用来完善以及以后制作更多更有趣的插件。
web学习笔记
刘群智的博客
07-27 1万+
常用属性............................................................................................ 1 Html基础........................................................................................... 3 ...
用四种不同的方法实现 tab栏切换
q2211164的博客
05-27 1094
基础片段 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
JS TAB效果126邮箱(同一页面可多次使用)代码
shuanghusun的专栏
11-08 708
引用时保留下原创作者喽,尊重任何一位原创作者,促进中国互联网进程 Editor:weasle http://www.hxcgw.com Email:weasle@163.com QQ:112011531 --> http://www.w3.org/1999/xhtml"> 简洁Tab body,div,ul,li{ padding:0; text-align:c
js最近做一个tabs切换的，需要嵌套，共享之
weixin_30256505的博客
12-15 119
jntabs.js //jntabs.js说明 // 2017.12.15, ijunxiong@126.com ,最近的tabs需要嵌套,做了一个,共享之 // // 引用jquery, demo使用jquery-1.7.2.min.js // 名词：标头，标体，标头集合，标体集合 // 基于标签自定义属性 hrel, brel 及样式 t...
常见选项卡内容切换+折叠+展开效果实现
weixin_34348111的博客
11-12 1412
1.选项卡效果预览 2.源码与简要说明 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>切换选项卡功能实现</title> 6 &...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值