js tab选项卡

最新推荐文章于 2023-02-15 17:58:21 发布

优降宁

最新推荐文章于 2023-02-15 17:58:21 发布

阅读量691

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/yjnlovepy/article/details/128673457

版权

效果展示图

tab选项卡

需求分析
未选择时，默认选中第一个标签页；
选择某一选项后，下方跳出对应游戏的相关介绍内容。

原理实现，运用html&css完成布局
未点击时第一项添加需要的属性
点击时查找到点击的那一项，将全部的属性归零，再在点击项上添加上对应的属性

<!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>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .zong{
            height: 500px;
            width: 600px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
        }
        .top{
            height: 100px;
            width: 600px;
        }
        .top ul{
            display: flex;
        }
        .top ul li{
            height: 100px;
            width: 150px;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
            font-weight: 500;
            background-color: antiquewhite;
        }
        .top ul li:hover{
            background-color: coral;
        }
        .bottom{
            height: 400px;
            width: 600px;
            background-color: cyan;
        }
        .bottom ul li{
            height: 400px;
            width: 600px;
            position: absolute;
            flex-wrap: wrap;
            font-size: 20px;
            display: none;
        }
        
    </style>
</head>
<body>
    <div class="zong">
        <div class="top">
            <ul>
                <li style="background-color: coral;">英雄联盟</li>
                <li >DOTA</li>
                <li >风暴英雄</li>
                <li >300英雄</li>
            </ul>
        </div>
        <div class="bottom">
            <ul>
                <li style="display: block;">
                    什么是英雄联盟？. 英雄联盟（League of Legends）是由美国Riot Games开发，腾讯游戏运营的全新英雄对战网游。. 英雄联盟的主创团队由各著名游戏公司的核心美术、策划、程序人员组成，他们打造了游戏中风格特色各异的英雄，加入更加丰富的物品合成系统、地图玩法、天梯匹配机制，以及独创的"召唤师"技能、符文、天赋组合，让玩家感受不一样的英雄对战网游。. 在游戏中，玩家将扮演一位召唤者，并选择你所信任的联盟国进入这个游戏的正义领域，为了控制瓦罗然的权利而奋战。. 在这个联盟中只有一条规则：胜者就是一切！.
                </li>
                <li>
                    《DotA》（Defense of the Ancients），可以译作守护古树、守护遗迹、远古遗迹守卫， 是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图，可支持10个人同时连线游戏，是暴雪公司官方认可的魔兽争霸的RPG地图。
                </li>
                <li>
                    什么是风暴英雄? 《风暴英雄》是一款团战游戏，其中包括了玩家耳熟能详的暴雪系列游戏英雄。 你可以个性化定制来自不同暴雪游戏时空的英雄，来找到适合自己游戏风格的英雄。 和好友一起组队进行一场快节奏的混战，不同的战场会带来不同的战术和游戏方法。
                </li>
                <li>
                    《300英雄》是由上海跳跃网络科技有限公司自主研发和运营的一款类DOTA网游。游戏以7v7组队对抗玩法为主，提供永恒战场和永恒竞技场两种经典模式任由玩家选择，并加入勇者斗恶龙、克隆战争等多种休闲娱乐玩法，主要特点是竞技感强、节奏快、对抗激烈。 
                </li>
            </ul>
        </div>
    </div>
    <script>
        var otop=document.querySelectorAll('.top li')
        var obottom=document.querySelectorAll('.bottom li')
        var checked=document.querySelector('.top ul')
    	//以下全部可以用i做for循环，检查点击的li，本人使用时无法使用此方法找到正确点击的li故此写法
        otop[1].onclick=function(){                   
            for(var j=0;j<otop.length;j++){
                otop[j].style.background = "antiquewhite"
                obottom[j].style.display="none"
            }
            otop[1].style.background = "coral" 
            obottom[1].style.display="block"
        }
        otop[0].onclick=function(){                   
            for(var j=0;j<otop.length;j++){
                otop[j].style.background = "antiquewhite"
                obottom[j].style.display="none"
            }
            otop[0].style.background = "coral" 
            obottom[0].style.display="block"
        }
        otop[2].onclick=function(){                   
            for(var j=0;j<otop.length;j++){
                otop[j].style.background = "antiquewhite"
                obottom[j].style.display="none"
            }
            otop[2].style.background = "coral" 
            obottom[2].style.display="block"
        }
        otop[3].onclick=function(){                   
            for(var j=0;j<otop.length;j++){
                otop[j].style.background = "antiquewhite"
                obottom[j].style.display="none"
            }
            otop[3].style.background = "coral" 
            obottom[3].style.display="block"
        }

        
    </script>
</body>
</html>