用 JavaScript + HTML + CSS 实现选项卡操作，点击不同选项就显示出不同的标题栏(并实现其他要求操作)

狮子座的男孩

已于 2022-04-29 13:22:30 修改

阅读量3.4k

点赞数 4

分类专栏： # 前端实战与例子文章标签： javascript js css dom操作前端

于 2021-06-14 15:23:55 首次发布

本文链接：https://blog.csdn.net/weixin_43405300/article/details/117903286

版权

前端实战与例子专栏收录该内容

53 篇文章 10 订阅

订阅专栏

Ⅰ、问题描述：

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

狮子座的男孩

关注

4
点赞
踩
53

收藏

觉得还不错? 一键收藏
打赏
23
评论
用 JavaScript + HTML + CSS 实现选项卡操作，点击不同选项就显示出不同的标题栏(并实现其他要求操作)

Ⅰ、问题描述：1、用JavaScript + html + css 实现，选项卡操作；2、分析：A、用 html + css 实现布局(盒子的布置，空间的分配等)；B、用 JavaScript 中的 DOM 操作，实现点击不同选项显示不同标题栏的功能；Ⅱ、实现过程如下：1、运行软件VScode，亲测可实现；2、运行代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&gt
复制链接

扫一扫