这个仿百度风云排行榜万博manbext3.0首页登录的原理和选项卡套选项卡的万博manbext3.0首页登录原理是一样的。

做JavaScript万博manbext3.0首页登录的基本步骤都是这样：

1、先完成一个模块的效果。

2、再封装成函数。

3、再通过调用函数传参的方式改变数据。

4、所有数据都是通过数据对象生成。

具体效果点击查看。

注意：代码更新了，但是下载的万博manbext3.0首页登录没有更新，可以用页面上的代码代替下载的代码。

一、html代码

<div id="wrap">
        <ul class="title-wrap clearfix">
        </ul>
        <div class="content-wrap">
            <p class="info"><span class="level">排名</span><span class="keywords">关键词</span><span class="count">指数</span>
            </p>
            <ul>
            </ul>
        </div>
    </div>

二、css代码

*{
    box-sizing:border-box;}
body,ul,li,h3,p{
    margin:0;
    padding:0;}
span{
    font-size:0.875em;
    color:#999;}
body{
    font:1em "microsoft Yahei";
    color:#333;}
li{
    list-style:none;}
img{
    border:none;
    vertical-align:middle;}
h3{
    font-weight:normal;}
a{
    text-decoration:none;}
.clearfix:after{
    content:"";
    display:block;
    clear:both;}

#wrap{
    width:400px;
    margin:20px auto;
    border:1px solid #ddd;}

.info{
    padding:5px 10px;
    border-bottom:1px solid #eee;}
.level{
    margin-right:10px;}
.searchtop{
    float:right;}
.nav li{
    float:left;
    text-align:center;
    line-height:40px;
    border-right:1px solid #ddd;
    border-bottom:1px solid #ddd;
    cursor:pointer;
    color:#666;}
.nav li:hover{
    color:#333;}
.nav li:last-child{
    border-right:none;}
.nav li.active{
    background-color:#DB2162;
    color:#fff;
    border-color:#BF0A49}
.content-wrap li{
    padding:10px;
    border-bottom:1px solid #eee;}
.item-head{
    font-size:1em;
    }
.item-head a{
    color:#2464B2;
    }
.item-head a:hover{
    text-decoration:underline;}
.num{
    display:inline-block;
    width:18px;
    height:18px;
    text-align:center;
    line-height:18px;
    color:#fff;
    margin-right:10px;
    border-radius:2px;
    }
.num.top{
    background-color:#F23D7C;
    }
.num.normal{
    background-color:#ccc;
    }
.count{
    float:right;
    }
.item-info{
    display:none;
    margin-top:10px;
    height:110px;
    overflow:hidden;
    word-break:break-all;
    word-wrap:break-word;}
.item-info img{
    float:left;
    margin:0 10px 10px 0;
    max-width:120px;
    max-height:110px;
    }
.item-info p{
    font-size:0.875em;
    color:#666;
    line-height:1.5;
    }

三、js代码

<script>
        // 找对象
        var oWrap = document.querySelector(".title-wrap");
        var oLiTitle = oWrap.getElementsByTagName("li");
        var oContent = document.querySelector(".content-wrap");
        var oUl = oContent.querySelector("ul");
        var oDivShow = document.getElementsByClassName("item-info");
        var oContentTitle = document.getElementsByClassName("title");



        // 初始化数据
        var data = [{
                'cata': "电影",
                'title': ['环太平洋：雷霆再起', '西游记女儿国', '复仇者联盟', '白鹿原', '银魂', '天生一对', '钢铁侠3', '三体', '天黑请闭眼', '星球大战8'],
                'count': [47423, 45818, 36925, 34983, 30202, 25357, 24797, 24606, 23992, 23627],
                'url': ['images/movie/1.jpg', 'images/movie/2.jpg', 'images/movie/3.jpg', 'images/movie/4.jpg',
                    'images/movie/5.jpg', 'images/movie/6.jpg', 'images/movie/7.jpg', 'images/movie/8.jpg',
                    'images/movie/9.jpg', 'images/movie/10.jpg'
                ],
                'info': ['《环太平洋：雷霆再起》是斯蒂文·S·迪奈特执导，约翰·波耶加、斯科特·伊斯特伍德、景甜、卡莉·史派妮、菊地凛子、伯恩·戈曼、亚德里亚·霍纳、张晋、查理·戴、黄恺杰、吉丽、蓝盈莹、于小…',
                    '《西游记女儿国》是星皓影业有限公司出品，由郑保瑞执导，郭富城、冯绍峰、赵丽颖、小沈阳、罗仲谦领衔主演，林志玲、梁咏琪、刘涛、苑琼丹、潘斌龙、施诗出演的喜剧魔幻片。该片讲述了…',
                    '《复仇者联盟》（Marvel&#39;s The Avengers）是由乔斯·韦登执导的动作科幻电影，小罗伯特·唐尼、克里斯·埃文斯、斯嘉丽·约翰逊、克里斯·海姆斯沃斯等主演出。主要讲述的是“复…',
                    '《白鹿原》是根据陈忠实的同名小说而改编的，由王全安执导，张丰毅、张雨绮、吴刚、段奕宏等主演。该片筹备9年、拍摄3年，影片以“白家”和“鹿家”在白鹿原上的争斗为背景，主要表达北…',
                    '《白鹿原》是根据陈忠实的同名小说而改编的，由王全安执导，张丰毅、张雨绮、吴刚、段奕宏等主演。该片筹备9年、拍摄3年，影片以“白家”和“鹿家”在白鹿原上的争斗为背景，主要表达北…',
                    '《天生一对》（The Parent Trap）是美国1998年出品的家庭喜剧电影，根据伊利奇·卡斯特纳《两个小洛特》改编，由南希·迈耶斯执导，林赛·罗韩、丹尼斯·奎德、娜塔莎·理查德森等主演。影片…',
                    '《钢铁侠3》是《钢铁侠》系列电影第三部，是由美国漫威影业公司出品的科幻动作电影，由沙恩·布莱克执导，小罗伯特·唐尼、格温妮丝·帕特洛、唐·钱德尔、盖·皮尔斯联合主演。该片于2013年5…',
                    '《三体》是中国游族影业出品的科幻电影，由张番番执导，冯绍峰、张静初、吴刚、唐嫣、杜淳、张翰等主演。该片根据中国科幻作家刘慈欣同名小说改编，讲述了在红岸基地人类文明初次向宇宙发出…',
                    '《天黑请闭眼》是由阿甘执导，吴倩莲、李小冉、张耀扬等人主演的一部惊悚影片。于2004年4月1日在中国大陆上映。影片以几个朋友在酒吧中玩杀人游戏开始，讲述了在死亡面前，几位好友之间…',
                    '《星球大战：最后的绝地武士》是《星球大战》系列第八部，是由美国卢卡斯电影有限公司出品的科幻动作片，由莱恩·约翰逊执导，黛茜·雷德利、约翰·波耶加、奥斯卡·伊萨克、亚当·德赖弗、马克·…'
                ]
            },
            {
                'cata': "电视剧",
                'title': ['如懿传', '延禧攻略', '白鹿原', '香蜜沉沉烬如霜', '夜天子', '再创世纪', '周六夜现场', '天黑请闭眼', '沙海'],
                'count': [47423, 45818, 36925, 34983, 30202, 25357, 24797, 24606, 23992, 23627],
                'url': ['images/tv/1.jpg', 'images/tv/2.jpg', 'images/tv/3.jpg', 'images/tv/4.jpg', 'images/tv/5.jpg',
                    'images/tv/6.jpg', 'images/tv/7.jpg', 'images/tv/8.jpg', 'images/tv/9.jpg'
                ],
                'info': ['《环太平洋：雷霆再起》是斯蒂文·S·迪奈特执导，约翰·波耶加、斯科特·伊斯特伍德、景甜、卡莉·史派妮、菊地凛子、伯恩·戈曼、亚德里亚·霍纳、张晋、查理·戴、黄恺杰、吉丽、蓝盈莹、于小…',
                    '《西游记女儿国》是星皓影业有限公司出品，由郑保瑞执导，郭富城、冯绍峰、赵丽颖、小沈阳、罗仲谦领衔主演，林志玲、梁咏琪、刘涛、苑琼丹、潘斌龙、施诗出演的喜剧魔幻片。该片讲述了…',
                    '《复仇者联盟》（Marvel&#39;s The Avengers）是由乔斯·韦登执导的动作科幻电影，小罗伯特·唐尼、克里斯·埃文斯、斯嘉丽·约翰逊、克里斯·海姆斯沃斯等主演出。主要讲述的是“复…',
                    '《白鹿原》是根据陈忠实的同名小说而改编的，由王全安执导，张丰毅、张雨绮、吴刚、段奕宏等主演。该片筹备9年、拍摄3年，影片以“白家”和“鹿家”在白鹿原上的争斗为背景，主要表达北…',
                    '《白鹿原》是根据陈忠实的同名小说而改编的，由王全安执导，张丰毅、张雨绮、吴刚、段奕宏等主演。该片筹备9年、拍摄3年，影片以“白家”和“鹿家”在白鹿原上的争斗为背景，主要表达北…',
                    '《天生一对》（The Parent Trap）是美国1998年出品的家庭喜剧电影，根据伊利奇·卡斯特纳《两个小洛特》改编，由南希·迈耶斯执导，林赛·罗韩、丹尼斯·奎德、娜塔莎·理查德森等主演。影片…',
                    '《钢铁侠3》是《钢铁侠》系列电影第三部，是由美国漫威影业公司出品的科幻动作电影，由沙恩·布莱克执导，小罗伯特·唐尼、格温妮丝·帕特洛、唐·钱德尔、盖·皮尔斯联合主演。该片于2013年5…',
                    '《三体》是中国游族影业出品的科幻电影，由张番番执导，冯绍峰、张静初、吴刚、唐嫣、杜淳、张翰等主演。该片根据中国科幻作家刘慈欣同名小说改编，讲述了在红岸基地人类文明初次向宇宙发出…',
                    '《天黑请闭眼》是由阿甘执导，吴倩莲、李小冉、张耀扬等人主演的一部惊悚影片。于2004年4月1日在中国大陆上映。影片以几个朋友在酒吧中玩杀人游戏开始，讲述了在死亡面前，几位好友之间…',
                    '《星球大战：最后的绝地武士》是《星球大战》系列第八部，是由美国卢卡斯电影有限公司出品的科幻动作片，由莱恩·约翰逊执导，黛茜·雷德利、约翰·波耶加、奥斯卡·伊萨克、亚当·德赖弗、马克·…'
                ]
            },

        ];

        // 初始化头部选项
        var len = data.length;
        data.forEach(function (item) {
            oWrap.innerHTML += "<li>" + item.cata + "</li>";

        })
        Array.from(oLiTitle).forEach(function (item) {
            item.style.width = 100 / len + "%";
        })

        var num = 0;
        var oldTitle = null;
        oLiTitle[num].classList.add("active");
        oldTitle = oLiTitle[num];

        // 初始化下面的结构
        tab(0);


        // 鼠标经过切换选项卡
        Array.from(oLiTitle).forEach(function (item, index) {
            item.onmouseover = function () {
                oldTitle.classList.remove("active");
                item.classList.add("active");
                oldTitle = item;
                // 每次调用之前先清空数据
                oUl.innerHTML = "";
                tab(index);
            }
        })





        // 初始化下面
        function tab(num) {
            var title = data[num].title;
            var url = data[num].url;
            var count = data[num].count;
            var info = data[num].info;
            title.forEach(function (item, index) {
                if (index < 3) {
                    oUl.innerHTML += "<li><h3 class='title'><span class='num top'>" + (index + 1) +
                        "</span><a href="'#'&hu;&rvpu;&octq; &octq;jufn&octq; &octq;&rvpu;μ/b&hu;μtqbo&octq;dmbtt='{ijtiv'&hu;&rvpu;&octq; &octq;dpvou[joefy]&octq; "
                        "</span></h3><div class='item-info'><a href="'#'&hu;μjnh&octq;tsd='&rvpu;&octq; &octq;vsm[joefy]&octq; &octq;&rvpu;'&hu;μ/b&hu;μq&hu;&rvpu;&octq; &octq;jogp["
                            index] + "</p></div></li>"
                } else {
                    oUl.innerHTML += "<li><h3 class='title'><span class='num normal'>" + (index + 1) +
                        "</span><a href="'#'&hu;&rvpu;&octq; &octq;jufn&octq; &octq;&rvpu;μ/b&hu;μtqbo&octq;dmbtt='{ijtiv'&hu;&rvpu;&octq; &octq;dpvou[joefy]&octq; "
                        "</span></h3><div class='item-info'><a href="'#'&hu;μjnh&octq;tsd='&rvpu;&octq; &octq;vsm[joefy]&octq; &octq;&rvpu;'&hu;μ/b&hu;μq&hu;&rvpu;&octq; &octq;jogp["
                            index] + "</p></div></li>"
                }
            })
            oDivShow[0].style.display = "block";

            // 鼠标经过切换显示和隐藏
            Array.from(oContentTitle).forEach(function (item, index) {
                item.onmouseover = function () {
                    for (var i = 0; i < oDivShow.length; i++) {
                        oDivShow[i].style.display = "none";
                    }
                    oDivShow[index].style.display = "block";
                }

            })
        }
    </script>

万博manbext3.0首页登录源代码下载地址：

链接: https://pan.baidu.com/s/1JqJLZNq78VWHg4i_Q0v9TA 提取码: cy5p