源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 2963|回复: 0

[CSS/Html] css+js实现tab切换功能的简单方法

[复制链接]

1169

主题

1557

帖子

8820

金币

超级版主

Rank: 8Rank: 8

积分
19326
发表于 2023-3-20 10:39:32 | 显示全部楼层 |阅读模式
如下直接给出HTML,CSS,等代码,不做过多解释,只看javaScript代码,主做笔记,如有不懂,留言我会解答

css样式:
  1. * {
  2.             margin: 0;
  3.             padding: 0;
  4.         }

  5.         ul {
  6.             list-style: none;
  7.         }

  8.         .wrapper {
  9.             width: 1000px;
  10.             height: 475px;
  11.             margin: 0 auto;
  12.             margin-top: 100px;
  13.         }

  14.         .tab {
  15.             border: 1px solid #ddd;
  16.             border-bottom: 0;
  17.             height: 36px;
  18.             width: 320px;
  19.         }

  20.         .tab li {
  21.             position: relative;
  22.             float: left;
  23.             width: 80px;
  24.             height: 34px;
  25.             line-height: 34px;
  26.             text-align: center;
  27.             cursor: pointer;
  28.             border-top: 4px solid #fff;
  29.         }

  30.         .tab span {
  31.             position: absolute;
  32.             right: 0;
  33.             top: 10px;
  34.             background: #ddd;
  35.             width: 1px;
  36.             height: 14px;
  37.             overflow: hidden;
  38.         }

  39.         .products {
  40.             width: 1002px;
  41.             border: 1px solid #ddd;
  42.             height: 476px;
  43.         }

  44.         .products .main {
  45.             float: left;
  46.             display: none;
  47.         }

  48.         .products .main.active {
  49.             display: block;
  50.         }

  51.         .tab li.active {
  52.             border-color: red;
  53.             border-bottom: 0;
  54.         }
复制代码

html代码:
  1.   <div class="wrapper">
  2.         <ul class="tab">
  3.             <li class="tab-item active">国际大牌<span>◆</span></li>
  4.             <li class="tab-item">国妆名牌<span>◆</span></li>
  5.             <li class="tab-item">清洁用品<span>◆</span></li>
  6.             <li class="tab-item">男士精品</li>
  7.         </ul>
  8.         <div class="products">
  9.             <div class="main active">
  10.                 <a href="###">图片可能失效,自己改下内容<img src="imgs/guojidapai.jpg" alt="" /></a>
  11.             </div>
  12.             <div class="main">
  13.                 <a href="###">图片可能失效,自己改下内容<img src="imgs/guozhuangmingpin.jpg" alt="" /></a>
  14.             </div>
  15.             <div class="main">
  16.                 <a href="###">图片可能失效,自己改下内容<img src="imgs/qingjieyongpin.jpg" alt="" /></a>
  17.             </div>
  18.             <div class="main">
  19.                 <a href="###">图片可能失效,自己改下内容<img src="imgs/nanshijingpin.jpg" alt="" /></a>
  20.             </div>
  21.         </div>
  22.     </div>
复制代码

js代码如下:会进行每一步分析

了解导航切换运行的原理,以及数组的索引
  1.         let tab = document.querySelector('.tab')
  2.         let lis = document.querySelectorAll('.tab .tab-item')
  3.         let main = document.querySelectorAll('.main')
  4.         
  5. // 因为lis索引的为全部.tab-item,所以此处需要用到循环遍历
  6.         for (let i = 0; i < lis.length; i++) {
  7.             console.log(lis[i])
  8. // 给每一个lis添加点击事件,切记lis[i]
  9.             lis[i].addEventListener('click', function () {
  10.                 console.log(i)
  11.                 for (let i = 0; i < main.length; i++) {
  12.                     // 清空li头部的样式
  13.                     lis[i].className = '';
  14.                 }
  15.                 // 给每一个小li 添加头部样式
  16.                 this.className = 'active'
  17.                 // 清空内容框的图片内容
  18.                 for (let i = 0; i < main.length; i++) {
  19.                     main[i].style.display = 'none'
  20.                 }
  21.                 //显示内容
  22.                 main[i].style.display = 'block'
  23.             })
  24.         }
复制代码

好了,以上就是锦尚中国关于利用css+js实现tab切换功能的方法,更多教程可以搜索本站的其余内容!感谢大家对锦尚中国源码论坛的支持与厚爱!



您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-4-14 09:32 , Processed in 0.038084 second(s), 16 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明