選擇卡

• 內(nèi)容
• 原理
• html
• css
• script

內(nèi)容

1.選項卡由英雄聯(lián)盟、DOTA、風暴英雄、apex四塊組成；
2.未選擇時，默認選中第一個標簽頁；
3.選擇某一選項后，下方跳出對應游戲的相關(guān)介紹內(nèi)容。

原理

js原理：

• 先獲取元素
• 然后for循環(huán)添加onclick和show這個類
• 然后再來一個循環(huán)，去掉show這個類，使達到點擊其中一個選擇卡時，其他不變這個變
• 然后為使得標題對應內(nèi)容，先獲取一個變量，然后把下面小div里present刪除，然后點擊誰就添加present這個類

html

<div class="container"><ul class="topOne"><li class="top show">英雄聯(lián)盟</li><li class="top">DOTA</li><li class="top">風暴英雄</li><li class="top">apex</li></ul><div class="content"><div class="present">《英雄聯(lián)盟》[1](League of Legends,簡稱LOL)是美國拳頭游戲開發(fā)的一款英雄對戰(zhàn)MOBA競技網(wǎng)游,于2011年9月22日開啟國服公測,游戲里擁有數(shù)百個個性英雄，并擁有排位系統(tǒng)、符文系統(tǒng)等特色養(yǎng)成系統(tǒng)，中國內(nèi)地由騰訊游戲代理運營。《英雄聯(lián)盟》致力于推動全球電子競技的發(fā)展，除了聯(lián)動各賽區(qū)發(fā)展職業(yè)聯(lián)賽、打造電競體系之外，每年還會舉辦“英雄聯(lián)盟季中冠軍賽”“英雄聯(lián)盟全球總決賽”“英雄聯(lián)盟全明星賽”三大世界級賽事，形成了自己獨有的電子競技文化。2021年12月10日,《英雄聯(lián)盟》獲得2021TGA最佳電競游戲獎。[2]</div><div>DotA》（Defense of the Ancients），可以譯作守護古樹、守護遺跡、遠古遺跡守衛(wèi)， 是由暴雪公司出品即時戰(zhàn)略游戲《魔獸爭霸3》的一款多人即時對戰(zhàn)、自定義地圖，可支持10個人同時連線游戲，是暴雪公司官方認可的魔獸爭霸的RPG地圖。最早的DOTA地圖則在混亂之治時代就出現(xiàn)了，一位叫做Eul（Euls）的玩家制作了第一張DOTA地圖《RoC DOTA》，其中兩隊都只有總共5個英雄，非常簡單 [1] 。Eul（Euls）退出之后有位玩家Steve Guinsoo整合了很多個英雄制作了DotA Allstars。在2005年，6.01版發(fā)布不久，IceFrog同Neichus對地圖進行了多次修正和更新。之后Neichus退出，IceFrog成為主要的地圖程序員，負責包括游戲的執(zhí)行和平衡的測試在內(nèi)的任何工作。隨著6系列版本不斷被發(fā)布，bug的修正，新的英雄和新增加的法術(shù)不斷被引入《DotA》。最終游戲分為兩個陣營，玩家需要操作英雄，通過摧毀對方遺跡建筑來獲取最終勝利。這種多人在線競技模式后來被稱為“Dota類游戲“，對之后的許多游戲產(chǎn)生了深遠的影響。</div><div>《風暴英雄》 是由暴雪娛樂公司開發(fā)的一款運行在Windows和Mac OS上的在線多人競技PC游戲。游戲中的英雄角色主要來自于暴雪四大經(jīng)典游戲系列：《魔獸世界》、《暗黑破壞神》、《星際爭霸》和《守望先鋒》。它是一款道具收費的游戲，與《星際爭霸Ⅱ》基于同一引擎開發(fā)。2022年11月17日，上海網(wǎng)之易網(wǎng)絡科技發(fā)展有限公司發(fā)布公告稱，由于公司與合作方暴雪娛樂的協(xié)議期限即將屆滿，在中國大陸地區(qū)由公司所運營的《風暴英雄》，將于2023年1月24日0時終止運營。</div><div>《Apex英雄》是由《泰坦天降》制作組Respawn研發(fā)的一款戰(zhàn)術(shù)競技游戲。 [1-2] 于2019年2月5日發(fā)行。玩家在游戲中將扮演外星戰(zhàn)場上的星空戰(zhàn)士。 [3] 《Apex英雄》于 2020 年秋季登陸Nintendo Switch和 Steam 平臺，并支持 PS4/Xbox One/Nintendo Switch/Steam/Origin跨平臺聯(lián)機。 [4] 《Apex英雄》共有18個 [25] 傳奇角色，三名玩家組成一個小隊，第一個賽季將從3月份開始，并會推出季票，每個賽季會帶來新的武器、角色和皮膚等內(nèi)容。 [2] 《Apex英雄》次世代升級將于2022年3月30日上線，支持4K輸出和HDR等功能，次世代版提供原生4K畫質(zhì)、全60Hz游戲、更高分辨率的陰影貼圖以及更高的LOD距離，游戲還將在未來更新120FPS，并對視覺、聽覺和觸覺進行優(yōu)化。 [27] 2022年5月，《Apex英雄》的PS5版登陸PSN港服商城。 [28] 2022年10月21日，重生娛樂發(fā)布了全新的《APEX英雄》“月食季”預告片，展示了游戲內(nèi)容的多樣性。</div></div></div>

css

*{margin: 0;padding: 0;}.container{width: 400px;background-color: rgb(3,137,253);margin: 100px auto;}.top{list-style: none; /* 取消圓點 */flex: 1;height: 30px;text-align: center;line-height: 30px;}.top:hover{cursor: pointer;}.topOne{display: flex;border: 1px solid black;}.content div{height: 400px;display: none;}.top.show{background: rgb(255,220,121);color: aliceblue;}.content div.present{display: block;}

script

const topOne = document.querySelectorAll(".top")const divs = document.querySelectorAll(".content div")for(let i=0 ; i<topOne.length ; i++){//添加點擊事件topOne[i].onclick = function(){for (let i=0;i<topOne.length;i++){topOne[i].classList.remove("show")divs[i].classList.remove("present")}this.classList.add("show")divs[i].classList.add("present")}}

![請?zhí)砑訄D片描述](https://img-blog.csdnimg.cn/f46e4404eb8e407db20d32a8985f21f1.png

![請?zhí)砑訄D片描述](https://img-blog.csdnimg.cn/ab82c6026af34cc0952132d4330a3710.png
![請?zhí)砑訄D片描述](https://img-blog.csdnimg.cn/fafb5df256694cc6acaba7efbcc5f06e.png

實現(xiàn)選擇卡

總結(jié)

以上是生活随笔為你收集整理的TAB选择卡的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。