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