tab选项卡

最新推荐文章于 2023-08-11 11:17:42 发布

l20040121_

最新推荐文章于 2023-08-11 11:17:42 发布

阅读量288

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/l20040121_/article/details/128660382

版权

要求：
1.选项卡由英雄联盟、DOTA、风暴英雄、300英雄四块组成；
2.未选择时，默认选中第一个标签页；
3.选择某一选项后，下方跳出对应游戏的相关介绍内容。
实现原理：
1.先设置好选项卡样式，以及所对应的内容
2.通过for循环使得点击卡片后使之与其内容相对应

<!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">
    <title>Document</title>
    <style>
li{
    list-style-type:none;
    float:left;
}
div.card{
    overflow:hidden;
}
div.card li{
    width:90px;
    height:50px;
    text-align: center;
    line-height: 50px;
    background-color: aquamarine;
}
div.con{
    background-color: aqua;
    width:500px;
    height:200px;
    overflow:hidden;
}
div.con li{
    width:330px;
    height:200px;
    display:none;
    line-height: 50px;
    text-indent: 2em;
}
div.con li.active{
    display:block;
}
    </style>
</head>
<body>
    <div class="card" id="card">
        <ul>
            <li class="active">英雄联盟</li>
            <li>DOTA</li>
            <li>风暴英雄</li>
            <li>300英雄</li>
        </ul>
    </div>
     
    <div class="con" id="con">
        <ul>
            <li class="active">League of legend，简称LOL，中文译名英雄联盟，也常常被玩家们亲切地称为“撸啊撸”，一款MOBA（多人在线竞技）类游戏，开发公司为美国拳头公司</li>
            <li>《DotA》(Defense of the Ancients)，可以译作守护古树、守护遗迹、远古遗迹守卫， 是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图，可支持10个人同时连线游戏，是暴雪公司官方认可的魔兽争霸的RPG地图。</li>
            <li>《风暴英雄》 是由暴雪娱乐公司开发的一款运行在Windows和Mac OS上的在线多人竞技PC游戏。</li>
            <li>《300英雄》是由上海跳跃网络科技有限公司自主研发的一款moba类网游。游戏以二次元7v7组队对抗玩法为主家选择。
</li>
        </ul>
    </div>
    <script>
        (function(){
            try{
                var card=document.getElementById("card");
                var cardLi=card.getElementsByTagName("li");
                var con=document.getElementById("con");
                var conLi=con.getElementsByTagName("li");
 
                for(var i=0;i<cardLi.length;i++){
                    cardLi[i].index=i;
                    cardLi[i].onclick=function(){
                        console.log(this.index);
                        for(var i=0;i<cardLi.length;i++){
                            cardLi[i].className="";
                            conLi[i].className="";
                        }
 
                        this.className="active";       
                        conLi[this.index].className="active";
                    }
                }
            }
            catch(err){
                return false
            }
        })();
    </script>
</body>
</html>

效果：

QQ录屏20230112152445

l20040121_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tab选项卡

1.选项卡由英雄联盟、DOTA、风暴英雄、300英雄四块组成；3.选择某一选项后，下方跳出对应游戏的相关介绍内容。2.通过for循环使得点击卡片后使之与其内容相对应。1.先设置好选项卡样式，以及所对应的内容。2.未选择时，默认选中第一个标签页；QQ录屏20230112152445。
复制链接

扫一扫