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

标题: css+js实现tab切换功能的简单方法 [打印本页]
作者: 欧阳锋    时间: 2023-3-20 10:39
标题: css+js实现tab切换功能的简单方法
如下直接给出HTML，CSS，等代码，不做过多解释，只看javaScript代码，主做笔记，如有不懂，留言我会解答

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

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

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

  17.         .tab {
  18.             border: 1px solid #ddd;
  19.             border-bottom: 0;
  20.             height: 36px;
  21.             width: 320px;
  22.         }

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

  35.         .tab span {
  36.             position: absolute;
  37.             right: 0;
  38.             top: 10px;
  39.             background: #ddd;
  40.             width: 1px;
  41.             height: 14px;
  42.             overflow: hidden;
  43.         }

  45.         .products {
  46.             width: 1002px;
  47.             border: 1px solid #ddd;
  48.             height: 476px;
  49.         }

  51.         .products .main {
  52.             float: left;
  53.             display: none;
  54.         }

  56.         .products .main.active {
  57.             display: block;
  58.         }

  60.         .tab li.active {
  61.             border-color: red;
  62.             border-bottom: 0;
  63.         }
复制代码

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切换功能的方法，更多教程可以搜索本站的其余内容！感谢大家对锦尚中国源码论坛的支持与厚爱！







欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/) Powered by Discuz! X3.3