慕课网

第1章系好安全带,准备启航
编程：1-1 让你认识JS
编程：1-2 编程练习

第10章编程挑战
编程：10-1 编程挑战

解锁即可观看《前端工程师》完整课程视频

立即解锁

前端工程师

前端入门如同写字，如果你不知道从哪开始，那就选择前端（含Vue3.x，React17,TS）

【第1周】HTML5基础语法与标签

【第2周】CSS3基础语法与盒模型

【第3周】CSS3浮动定位与背景样式

【第4周】CSS3动画与穷游首页开发实战

【第5周】JS基础语法与表达式

【第6周】JS流程控制语句与数组

【第7周】JS函数与DOM

【第8周】面向对象

【第9周】项目实战：仿穷游JS特效开发

【第10周】ES6基础入门

【第11周】ES6语法扩展

【第12周】ES6之Promise与Class类

【第13周】ES6之Module模块与Babel编译

【第14-15周】HTTP 协议、存储、Ajax

【第16周】项目实战：仿穷游组件化开发

【第17周】移动基础

【第18周】移动进阶之高效开发

【第19周】项目实战：仿穷游移动webapp开发

【第20周】小程序基础与慕课小程序实战

【第21-22周】Sass基础与Vue.js基础语法

【第23周】项目实战：Vue.js仿京东到家电商全栈项目前端开发（上）

【第24-25周】项目实战：Vue.js仿京东到家电商全栈项目前端（下）

【第26周】全栈必备基础Node.js

【第27周】koa2中间件与MongoDB数据库

【第28-29周】项目实战：node.js仿京东到家电商全栈项目后端开发

【第30周】TypeScript与React.js基础语法

【第31-32周】React旅游网开发与工程化

【第33周】就业必备基础技术面试分析

【第34周】就业必备框架与全栈技术面试分析

编程挑战

现在利用之前我们学过的JavaScript知识，实现选项卡切换的效果。

效果图:

文字素材:

房产：

275万购昌平邻铁三居总价20万买一居
200万内购五环三居 140万安家东三环
北京首现零首付楼盘 53万购东5环50平
京楼盘直降5000 中信府公园楼王现房

家居:

40平出租屋大改造美少女的混搭小窝
经典清新简欧爱家 90平老房焕发新生
新中式的酷色温情 66平撞色活泼家居
瓷砖就像选好老婆卫生间烟道的设计

二手房：

通州豪华3居260万二环稀缺2居250w甩
西3环通透2居290万 130万2居限量抢购
黄城根小学学区仅260万 121平70万抛!
独家别墅280万苏州桥2居优惠价248万

任务

大家先思考和分析实现思路，然后在动手实现

一、HTML页面布局

提示:
选项卡标题使用ul..li
选项卡内容使用div

二、CSS样式制作

提示:
整个选项卡的样式设置
选项卡标题的样式设置
选项卡内容的样式设置
一开始只显示一个选项卡内容，其它选项卡内容隐藏。

三、JS实现选项卡切换

提示:
获取选项卡标题和选项卡内容
选项卡内容多个，需要循环遍历来操作，得知哪个选项卡和哪个选项内容匹配
通过改变DOM的css类名称,当前点击的选项卡显示，其它隐藏。

?不会了怎么办: HTML代码:

css样式式:

JS代码:

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

10-1 编程挑战

编程挑战

任务

写笔记

收藏课程后，能更快找到我哦～