Tab选项卡

最新推荐文章于 2024-08-03 17:05:14 发布

self_correction

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量640

点赞数

本文链接：https://blog.csdn.net/self_correction/article/details/128683776

版权

本文介绍了如何使用HTML、CSS和JavaScript实现Tab选项卡功能，包括菜单与内容的同步切换。示例包含四个游戏主题：英雄联盟、DOTA、风暴英雄和300英雄，详细展示了HTML结构、CSS样式和JS交互代码。

摘要由CSDN通过智能技术生成

Tab选项卡

一、Demo
- <1>.要求
- <2>.功能
二、实现原理
三、代码
四、效果展示

一、Demo

<1>.要求

1.选项卡由英雄联盟、DOTA、风暴英雄、300英雄四块组成；
2.未选择时，默认选中第一个标签页；
3.选择某一选项后，下方跳出对应游戏的相关介绍内容。

<2>.功能

将同一层级的内容组通过选项卡分组，并支持切换展示.

二、实现原理

思路：静态交给HTML和CSS实现，JS部分主要负责2点：菜单和内容。
主要难点：如何让菜单和内容同步进行
答：设置嵌套for语句，分别对应菜单（第一个for）和内容（菜单for语句里的for语句），
通过if else判断语句，让菜单与内容同步进行

三、代码

<1>.Html部分

<!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>Tab选项卡</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="container">
        <div class="box">
            <div class="first">
                <span class="first-1">英雄联盟</span>
                <span>DOTA</span>
                <span>风暴英雄</span>
                <span>300英雄</span>
            </div>
        </div>
        <div class="second">
            <ul>
                <li class="second-2">
                &nbsp;&nbsp;&nbsp;&nbsp;（League of Legends，简称LOL）是美国拳头游戏开发的一款英雄对战MOBA竞技网游，于2011年9月22日开启国服公测，游戏里拥有数百个英雄，并拥有排位系统、符文系统等特色养成系统，中国内地由腾讯游戏代理。
                <br>
                <br>
                &nbsp;&nbsp;&nbsp;&nbsp;《英雄联盟》致力于推动全球电子竞技的发展，除了联动各赛区发展职业联赛、打造电竞体系之外，每年还会举办“英雄联盟季中冠军赛”“英雄联盟全球总决赛”“英雄联盟全明星赛”三大世界级赛事，形成了自己独有的电子竞技文化。
                2021年12月10日，《英雄联盟》获得2021TGA最佳电竞游戏奖。</li>

                <li>
                &nbsp;&nbsp;&nbsp;&nbsp;《DOTA》，译作刀塔，是以《魔兽争霸III：冰封王座》为基础制作的自定义地图，也是暴雪公司官方认可的魔兽争霸的RPG地图。
                <br>
                <br>
                &nbsp;&nbsp;&nbsp;&nbsp;地图中分为两个对立阵营，玩家通过操作英雄摧毁对方遗迹建筑来获取胜利。这种多人在线竞技模式后来被称为“Dota类游戏“，对之后的许多游戏产生了深远的影响。</li>
                <li>
                &nbsp;&nbsp;&nbsp;&nbsp;《风暴英雄》是由暴雪娱乐公司开发的一款多人在线竞技游戏，于2015年6月3日正式上线 ，中国大陆由网易公司代理。
                <br>
                <br>
                &nbsp;&nbsp;&nbsp;&nbsp;游戏中的英雄角色主要来自于暴雪四大经典游戏系列《魔兽世界》、《暗黑破坏神》、《星际争霸》和《守望先锋》，玩家需要操控一个英雄，和队友一起，通过控制地图元素、升级、击杀对方英雄来扩大优势并摧毁对方基地以获得胜利。
                <br>
                <br>
                &nbsp;&nbsp;&nbsp;&nbsp;2022年11月16日，暴雪娱乐发布声明，由于网易的现有授权协议在2023年1月23日到期，暂停在中国大陆的游戏服务。</li>
                <li>
                &nbsp;&nbsp;&nbsp;&nbsp;《300英雄》是由上海跳跃网络科技有限公司自主研发，深圳中青宝互动网络股份有限公司运营的一款多人在线战术竞技（MOBA）类网游。
                <br>
                <br>
                &nbsp;&nbsp;&nbsp;&nbsp;《300英雄》以7V7组队对抗为主，并有多种娱乐模式供玩家选择。该作创新性地将人气动漫角色融入传统MOBA元素，玩家既可以操作自己喜爱的动漫人物驰骋于战场，同时又享受着MOBA游戏所带来的刺激畅快的游戏体验，在ACG爱好者和MOBA玩家中掀起一股双向热潮。</li>
            </ul>
        </div>
    </div>    
    <script src="./index.js"></script>
</body>
</html>

<2>.Css部分

*{
    margin: 0;
    padding: 0;
}
.container{
    margin: 100px auto;
    width: 500px;
}

.box .second{
    margin: 100px auto;
    width: 500px;
}

.first span{
    display: inline-block;
    width: 100px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background-color: #72b8a0;
    cursor: pointer;
}
img{
    width: 100%;
    height: 100%;

}
.first .first-1{
    background-color: #e5e5e5;
}

.second li{
    display: none;
    list-style: none;
    width: 415px;
    height: 300px;
    text-align: left;
    color: #000;
    background-color: #e5e5e5;
}

.second .second-2{
    display: block;
}

<3>.Js部分

var spanlist = document.querySelectorAll('span');
var list = document.querySelectorAll('li');
// 获取span和li标签

for (var i = 0; i < spanlist.length; i++){      //设置遍历，获取点击事件
    spanlist[i].setAttribute('index',i);
    spanlist[i].onclick = function(){           //声明点击事件
        var index = this.getAttribute('index');
        for(var n = 0; n<list.length;n++){      //让for循环遍历list，寻找与spanlist相对应的list
            if(index == n){                     //通过if else判断语句，让spanlist与list同步进行
                spanlist[n].className = 'first-1';
                list[n].style.display = 'block';
            }else{
                spanlist[n].className = '';
                list[n].style.display = 'none';
            }
        }
    }
}