JavaScript实现tab栏切换

最新推荐文章于 2023-05-22 15:43:10 发布

夏至か未至

最新推荐文章于 2023-05-22 15:43:10 发布

阅读量290

点赞数

分类专栏： JavaScript经典案例实现文章标签： html javascript

本文链接：https://blog.csdn.net/weixin_45650502/article/details/108749579

版权

JavaScript实现tab栏切换

核心思想：主要使用的是排他思想，即干掉所有人，只保留自己一个。
案例分析：
主要从两个方面考虑，一是tab栏的模块选项卡，二是下面的模块内容的变化。
（1）在模块选项中，点击某一个，背景颜色发生变化，其余不变（排他思想），方法是修改对应的类名；
（2）模块内容与模块选项内容一一匹配，随选项卡的变化而变化，将模块变化写在点击事件中；
（3）重点：给模块选项中的所有li添加自定义属性，属性值从0开始编号，然后采用遍历索引号的方式，干掉所有的li,清除其中相应的类，只保留点击的这一个（排他思想）。
（4）最后当点击某个li时，让对应序号的模块内容显示，其余隐藏（排他思想）。

完整代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>tab栏切换</title>
    <style>
    /*清除元素默认的内外边距*/
    	* {
    
            margin: 0;
            padding: 0;
        }
        /*去掉列表(li)前面的小点*/
        li {
    
            list-style-type: none;
        }
        
        .tab {
    
            width: 978px;
            margin: 100px auto;
        }
        
        .tab_list {
    
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        
        .tab_list li {
    
            float:

最低0.47元/天解锁文章

夏至か未至

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现tab栏切换

JavaScript实现tab栏切换核心思想：主要使用的是排他思想，即干掉所有人，只保留自己一个。完整代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tab栏切换</title> <style> /*清除元素默认的内外边距*/ * { margin:
复制链接

扫一扫