寒假集训D13 Demo tab选项卡

题目需求：

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

演示：

tab选项

body部分：

<body><div class="content"><div class="inner">英雄联盟</div><div class="inner">DOTA2</div><div class="inner">风暴英雄</div><div class="inner">300英雄</div><ul class="what"><li>2009年美国拳头游戏开发的MOBA竞技网游
《英雄联盟》（League of Legends，简称LOL）是由美国拳头游戏（Riot Games）开发、中国内地由腾讯游戏代理运营的英雄对战MOBA竞技网游。
游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色系统。
《英雄联盟》致力于推动全球电子竞技的发展，除了联动各赛区发展职业联赛、打造电竞体系之外，每年还会举办“英雄联盟季中冠军赛”、
“英雄联盟全球总决赛”、“英雄联盟全明星赛”三大世界级赛事，形成了自己独有的电子竞技文化。</li><li>《刀塔2》也被称作《DOTA2》，由《DOTA》的地图核心制作者IceFrog（冰蛙）联手美国Valve公司研发的一款游戏，于2013年4月28日开始测试，发布中文名为“刀塔”，是该系列的第二部作品。
《刀塔2》完整继承了原作《DotA》一百多位的英雄，并脱离了上一代作品《DOTA》所依赖的《魔兽争霸Ⅲ》引擎的多人即时对战游戏，
《刀塔2》的世界由天辉和夜魇两个阵营所辖区域组成，有上、中、下三条主要的作战道路相连接，中间以河流为界。每个阵营分别由五位玩家所扮演的英雄担任守护者，他们将以守护己方远古遗迹并摧毁敌方远古遗迹为使命，
通过提升等级、赚取金钱、购买装备和击杀敌方英雄等手段达成胜利。 </li><li>《风暴英雄》 是由暴雪娱乐公司开发的一款运行在Windows和Mac OS上的在线多人竞技PC游戏。
游戏中的英雄角色主要来自于暴雪四大经典游戏系列：《魔兽世界》、《暗黑破坏神》、《星际争霸》和《守望先锋》。
它是一款道具收费的游戏，与《星际争霸Ⅱ》基于同一引擎开发。</li><li>《300英雄》是由上海跳跃网络科技有限公司自主研发，深圳中青宝互动网络股份有限公司运营的一款类DOTA网游。游戏以7v7组队对抗玩法为主，提供永恒战场和永恒竞技场两种经典模式任由玩家选择，并创新性地加入勇者斗恶龙、克隆战争等多种休闲娱乐玩法。</li></ul></div>

css部分：

<style>*{margin: 0;padding: 0;}.content{width: 600px;height: 500px;background-color: gainsboro;margin: auto ;border-radius: 15px 20px 30px 30px;margin-top: 100px;}.inner{width: 148px;height: 25px;text-align: center;float: left;background-color: burlywood;border-radius: 15px 15px 0 0;margin-right: 2px;cursor: pointer;}.what{width: 600px;height: 400px;float: left;list-style: none;}.what li{width: 600px;height: 200px;background-color: cyan;border-radius: 0 0 18px 18px;}</style>

JavaScript部分：

<script>//获取四个tabvar a = document.getElementsByClassName('inner');//获取相应的内容var b = document.getElementsByTagName('li');//项和内容对应a[0].style.background = 'cyan';b[0].style.display = 'block';//循环点击for( let i = 0 ;i < a.length; i++){a[i].onclick = function(){//循环取消点击for( let j = 0; j < a.length; j++){a[j].style.background = 'burlywood';b[j].style.display = 'none';}//点击变换a[i].style.background = 'cyan';//跟随变换;b[i].style.display = 'block'}}</script>

实现原理：先设置优先选中，再设置函数，使inner项与li项相对应，利用for循环得到四个tab事件，最后循环跟随，得到tab选项卡

寒假集训D13 Demo tab选项卡相关推荐

寒假集训D14 Demo 随机点名
题目需求: 分为上下两个部分,上方显示,下方控制.显示区域为基地所有成员工号与姓名: 控制区域由开始与结束两个张妞妞组成. 点击开始按键,区域内姓名开始滚动,点击结束键,内容滚动停止,随机显示一位成员 ...
iOS开发-iPad侧边栏Tab选项卡切换
Android中习惯了叫侧边栏,iOS中如果不习惯侧边栏称呼的话可以叫dock,侧边栏的切换,类似于Android中的底部导航栏的切换,iPad尺寸大了一些,导航的栏目放在侧边会显示的更好耐看一些.选 ...
Tab选项卡切换效果JavaScript汇总
tab切换在现在的网页上,真是十分的常用呀.但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现.这里收集了37个tab实现的JavaScript代码,在此备 ...
使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
微信小程序Tab选项卡切换大集合
代码地址如下: http://www.demodashi.com/demo/14028.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
[Layui]主页tab选项卡操作(刷新页面，刷新选项卡，关闭，关闭其他，全部关闭)
主页tab选项卡操作(刷新页面,刷新选项卡,关闭,关闭其他,全部关闭) 效果如下: CSS <style>.layui-tab-item {height: 100%;width: 100% ...
动感效果的TAB选项卡 jquery 插件
动感效果的TAB选项卡 jquery 插件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
【Android UI设计与开发】第11期：顶部标题栏（二）ActionBar实现Tab选项卡和下拉导航列表
转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9050573 在上一篇文章中,我们只是大概的了解了一下关于ActionBar ...
用fieldset标签轻松实现Tab选项卡效果
fieldset是一个不常用的HTML标签,它可以将表单内的元素分组显示,legend标签为 fieldset 元素定义标题.由于各浏览器在显示fieldset和legend结构时会自动为其添加边框和 ...

寒假集训D13 Demo tab选项卡

题目需求：

演示：

寒假集训D13 Demo tab选项卡相关推荐

最新文章

热门文章