Tab栏切换案例

最新推荐文章于 2022-11-22 22:11:51 发布

加加Joey

最新推荐文章于 2022-11-22 22:11:51 发布

阅读量2k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Joeyyy126/article/details/126046148

版权

本文介绍如何使用JavaScript实现Tab栏切换效果，重点在于利用排他思想改变选中项的样式，并确保上下两部分内容的联动。通过设置自定义属性保存索引号，实现不同部分的连接，同时确保切换过程中不留下痕迹。

摘要由CSDN通过智能技术生成

style 部分 CSS

 <style>
      * {
        margin: 0;
        padding: 0;
      }

      li {
        list-style: none;
      }

      .tab {
        width: 800px;
        height: 300px;
        margin: 100px auto;
        border: 1px solid #ccc;
      }

      .tab_list {
        height: 39px;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
      }

      .tab_list li {
        float: left;
        height: 39px;
        line-height: 39px;
        padding: 0 20px;
        text-align: center;
        cursor: pointer;
      }

      .tab_list .current {
        background-color: #c81623;
        color: #fff;
      }

      .item {
        display: none;
      }
    </style>

HTML部分

<body>
    <div class="tab">
      <div class=

最低0.47元/天解锁文章

加加Joey

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫