Ⅰ、问题描述:
1、用JavaScript + html + css 实现,选项卡操作;
2、分析:
A、用 html + css 实现布局(盒子的布置,空间的分配等);
B、用 JavaScript 中的 DOM 操作,实现点击不同选项显示不同标题栏的功能;
Ⅱ、实现过程如下:
1、运行软件VScode,亲测可实现;
2、运行代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
font-family: '微软雅黑';
font-size: 14px;
}
#container {
width: 398px;
margin: 100px auto;
}
#container a {
display: block;
width: 98px;
height: 42px;
line-height: 42px;
text-align: center;
float: left;
border-top: solid 1px #ff4400;
border-bottom: solid 1px #ff4400;
border-left: solid 1px #ff4400;
color: #333333;
text-decoration: none;
}
#container a:hover { /* 鼠标放在 a 的标签上,其文字将显示为:红色; */
color: #ff4400;
}
.content {
width: 355px;
height: 140px;
text-align: center;
border-right: solid 1px #ff4400;
border-bottom: solid 1px #ff4400;
border-left: solid 1px #ff4400;
padding: 30px 0 0 40px;
display: none;
}
.clear {
clear: left;
}
#container a.on { /* 对a标签中的类名为:on 的标签进行操作; */
background: #ff4400;
color: #fff;
}
</style>
</head>
<body>
<div id="container">
<a href="#" class="on" >充话费</a> <!-- 类为:on 的 a 标签; -->
<a href="#" >充流量</a>
<a href="#" >充固话</a>
<a href="#" style="border-right: 1px solid #ff4400;">充宽带</a> <!-- style 操作目的:使得显示的盒子最右边有边框; -->
<div class="clear"></div>
<div class="content" style="display: block;"> <!-- style 操作目的:使第一个图片在初始状态时,能显示出来; -->
<img src="images/1.png" width="355px"/>
<!-- 该位置存放的是:图片的地址 (即:里面加载的是图片信息) -->
</div>
<div class="content">
<img src="images/2.png" width="355px" />
<!-- 该位置存放的是:图片的地址 (即:里面加载的是图片信息) -->
</div>
<div class="content">
<img src="images/3.png" width="355px" />
<!-- 该位置存放的是:图片的地址 (即:里面加载的是图片信息) -->
</div>
<div class="content">
<img src="images/4.png" width="355px" />
<!-- 该位置存放的是:图片的地址 (即:里面加载的是图片信息) -->
</div>
</div>
<script>
var as = document.getElementsByTagName('a'); //通过 DOM 操作,拿到标签为 a 的所有的元素(是个集合);
var divs = document.getElementsByClassName('content');//通过 DOM 操作,拿到类为 content 的所有的元素(是个集合);
for(var i=0; i<as.length; i++) {
as[i].index = i; //给拿到的每个元素对象添加索引属性; (由于通过 DOM 操作拿到的元素是对象,因此可以添加属性值);
as[i].onclick = function() { //给 as集合 绑定单击事件;
for(var j=0; j<as.length; j++) {
as[j].className = ''; //将 as集合 的所有元素的类名全部取消; (此时用的思想为:排他思想;)
divs[j].style.display = 'none'; //将 divs集合 的所有元素全设置成不显示状态;
}
this.className = 'on'; //仅将被单击的元素的类名设置为:on,以便执行在 css 中的相关操作;
divs[this.index].style.display = 'block'; //并将被单击的元素的相关图片设置为:block状态;(即:显示出来;)
}
}
</script>
</body>
</html>
3、结果展示:
A、默认的显示结果:
B、点击 ‘充流量’ 后的显示结果:
C、点击 ‘充固话’ 后的显示结果:
D、点击 ‘充宽带’ 后的显示结果:
4、可能存在的问题:
A 、如果自己也加载了图片信息,仍然不能显示该结果,可以直接下载我传上去的文档(可能解释的更详细),可以直接在 VScode 等其他软件上加载运行;
地址为:
https://download.csdn.net/download/weixin_43405300/19645922?spm=1001.2014.3001.5501
5、若对该选项卡操作实例有兴趣,还有一种实现方法:
setAttribute() 与 getAttribute() 用法剖析及选项卡操作的实例展示
地址:https://blog.csdn.net/weixin_43405300/article/details/124490847
Ⅲ、小结:
哪里有不对或不合适的地方,还请大佬们多多指点和交流!
https://download.csdn.net/download/weixin_43405300/19645922?spm=1001.2014.3001.5501