编程挑战，JavaScript进阶篇教程-慕课网

编程挑战

现在利用之前我们学过的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代码:

问答
评论
笔记
资料下载
代码

全部精华我要发布

勉强实现了，盒子好麻烦

最新回答 / 慕粉3414280

<...code...>

1 回答 323 浏览

2023-05-06

DIV确实是块级元素，独立一行显示F12--元素可以看到，你的第一个DIV实际高度为0，第二个DIV才有真实高度<...图片...>原因在哪里呢？将添加在li上的浮动属性去掉就恢复正常了<...图片...>造成这个现象的原因是元素浮动Float后会脱离标准文档流，所以第一个DIV没有被撑开，详细原理看链接https://blog.csdn.net/Czc1357618897/article/details/122980847

1 回答 555 浏览

2022-09-30

为什么我获取不了for循环的下标

最新回答 / 瓦洛佳YUP

var lis=document.getElementsByTagName("lis");这句里面后面“lis”没有这个标签吧！没贴出来HTML，代码逻辑不太好确定呢！

1 回答 430 浏览

2022-04-15

差不多实现了

+ 我来回答回答最高可+2积分

0 回答 756 浏览

2022-04-15

为什么默认第一个？鼠标事件

最赞回答 / JaeWong

因为房产的class样式设置成显示了，另外两个是设置成默认隐藏，你可以通过修改初始class样式来实现网页打开时具体要展现哪一个tab

1 回答 576 浏览

2022-07-06

作业实现代码

最新回答 / 精慕门1579193

div class="content"这块内容没有进行切换哦我自己写了一个很low的实现方法： if(e.target.getAttribute("id") == "j1"){ //document.write("check j1") document.getElementById("j2").style.display = "block"; document.getElementById("...

1 回答 1090 浏览

2022-04-20

代码实现--利用事件冒泡不多次获取dom元素

最新回答 / cherish_xyx

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css"> /* CSS样式制作 */ ul { list-style:none; margin:0; padding:0; ...

1 回答 514 浏览

2022-04-20

代码实现（利用事件冒泡不多次获取dom）

+ 我来回答回答最高可+2积分

0 回答 455 浏览

2022-04-20

作业代码.

最新回答 / 慕设计0012841

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css"> /* CSS样式制作 */ * { margin: 0px;padding: 0px;font-family: 'Microsoft YaHei','SimSun';line-heig...

1 回答 786 浏览

2022-04-20