css+js实现tab切换功能的简单方法

欧阳锋

如下直接给出HTML，CSS，等代码，不做过多解释，只看javaScript代码，主做笔记，如有不懂，留言我会解答

css样式：

1. * {
   
2.             margin: 0;
   
3.             padding: 0;
   
4.         }
   
5. 
   
6.         ul {
   
7.             list-style: none;
   
8.         }
   
9. 
   
10.         .wrapper {
    
11.             width: 1000px;
    
12.             height: 475px;
    
13.             margin: 0 auto;
    
14.             margin-top: 100px;
    
15.         }
    
16. 
    
17.         .tab {
    
18.             border: 1px solid #ddd;
    
19.             border-bottom: 0;
    
20.             height: 36px;
    
21.             width: 320px;
    
22.         }
    
23. 
    
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.         }
    
34. 
    
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.         }
    
44. 
    
45.         .products {
    
46.             width: 1002px;
    
47.             border: 1px solid #ddd;
    
48.             height: 476px;
    
49.         }
    
50. 
    
51.         .products .main {
    
52.             float: left;
    
53.             display: none;
    
54.         }
    
55. 
    
56.         .products .main.active {
    
57.             display: block;
    
58.         }
    
59. 
    
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切换功能的方法，更多教程可以搜索本站的其余内容！感谢大家对锦尚中国源码论坛的支持与厚爱！