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

2021-7-2    前端达人

Ⅰ、问题描述：

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> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    • 

    
  • 
        42
    
    • 

    
  • 
        43
    
    • 

    
  • 
        44
    
    • 

    
  • 
        45
    
    • 

    
  • 
        46
    
    • 

    
  • 
        47
    
    • 

    
  • 
        48
    
    • 

    
  • 
        49
    
    • 

    
  • 
        50
    
    • 

    
  • 
        51
    
    • 

    
  • 
        52
    
    • 

    
  • 
        53
    
    • 

    
  • 
        54
    
    • 

    
  • 
        55
    
    • 

    
  • 
        56
    
    • 

    
  • 
        57
    
    • 

    
  • 
        58
    
    • 

    
  • 
        59
    
    • 

    
  • 
        60
    
    • 

    
  • 
        61
    
    • 

    
  • 
        62
    
    • 

    
  • 
        63
    
    • 

    
  • 
        64
    
    • 

    
  • 
        65
    
    • 

    
  • 
        66
    
    • 

    
  • 
        67
    
    • 

    
  • 
        68
    
    • 

    
  • 
        69
    
    • 

    
  • 
        70
    
    • 

    
  • 
        71
    
    • 

    
  • 
        72
    
    • 

    
  • 
        73
    
    • 

    
  • 
        74
    
    • 

    
  • 
        75
    
    • 

    
  • 
        76
    
    • 

    
  • 
        77
    
    • 

    
  • 
        78
    
    • 

    
  • 
        79
    
    • 

    
  • 
        80
    
    • 

    
  • 
        81
    
    • 

    
  • 
        82
    
    • 

    
  • 
        83
    
    • 

    
  • 
        84
    
    • 

    
  • 
        85
    
    • 

    
  • 
        86
    
    • 

    
  • 
        87
    
    • 

    
  • 
        88
    
    • 

    
  • 
        89
    
    • 

    
  • 
        90
    
    • 

    
  • 
        91
    
    • 

    
  • 
        92
    
    • 

    
  • 
        93
    
    • 

    
  • 
        94
    
    • 

    
  • 
        95
    
    • 

    
  • 
        96
    
    • 

    
  • 
        97
    
    • 

    
  • 
        98
    
    • 

    
  • 
        99
    
    • 

    
  • 
        100
    
    • 

    
  • 
        101
    
    • 

    
  • 
        102
    
    • 

    
  • 
        103
    
    • 

    
  • 
        104
    
    •

3、结果展示：
A、默认的显示结果：
在这里插入图片描述
B、点击 ‘充流量’ 后的显示结果：
在这里插入图片描述
C、点击 ‘充固话’ 后的显示结果：
在这里插入图片描述

D、点击 ‘充宽带’ 后的显示结果：
在这里插入图片描述
4、可能存在的问题：
A 、如果自己也加载了图片信息，仍然不能显示该结果，可以直接下载我传上去的文档(可能解释的更详细)，可以直接在 VScode 等其他软件上加载运行；

地址为：

https://download.csdn.net/download/weixin_43405300/19645922?spm=1001.2014.3001.5501

Ⅲ、小结：

哪里有不对或不合适的地方，还请大佬们多多指点和交流！


https://download.csdn.net/download/weixin_43405300/19645922?spm=1001.2014.3001.5501





蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

截屏2021-05-13 上午11.41.03.png


转自：csdn
分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

« 做设计尽量避免掉的8个错误 关于通过v-if渲染的element-ui表单，校验规则不生效的问题 »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档