js利用DOM制作选项卡tab栏切换案例演示教程

①Tab栏切换有2个大的模块
②上的模块选项卡,点击某-个，当前这一个底色会是红色,餘不变(排他思想)修改类名的方式
③下面的模块内容,会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。
④规律:下面的模块显示内容和上面的选项卡一对应 ,相匹配。
⑤核心思路:给上面的tab_ list 里面的所有小i添加自定义属性，属性值从0开始编号。
⑥当我们点击tab_ list 里面的某个小i，让tab_ con 里面对应序号的内容显示，其余隐藏(排他思想)

js利用DOM制作选项卡tab栏切换案例演示教程

案例js代码：

1.     <style>
   
2.         #nav {
   
3.             width: 700px;
   
4.             background-color: #E9EBE8;
   
5.             margin: 0 auto;
   
6.             text-align: center;
   
7.             height: 50px;
   
8.         }
   
9.         
   
10.         ul {
    
11.             margin: 0;
    
12.             padding: 0;
    
13.             list-style: none;
    
14.         }
    
15.         
    
16.         ul li {
    
17.             display: inline-block;
    
18.             line-height: 50px;
    
19.             padding: 0 20px;
    
20.             cursor: pointer;
    
21.         }
    
22.         
    
23.         #nav ul .cur {
    
24.             color: #fff;
    
25.             background-color: red;
    
26.         }
    
27.         
    
28.         #contact {
    
29.             width: 700px;
    
30.             margin: 0 auto;
    
31.         }
    
32.         
    
33.         .item {
    
34.             display: none;
    
35.         }
    
36.         
    
37.         #contact div:first-child {
    
38.             display: block;
    
39.         }
    
40.     </style>
    
41.     <div id="nav">
    
42.         <ul>
    
43.             <li class="cur">自丢网介绍</li>
    
44.             <li>关于自丢网</li>
    
45.             <li>自丢网新闻</li>
    
46.             <li>自丢网产品</li>
    
47.             <li>自丢网首页</li>
    
48.         </ul>
    
49.     </div>
    
50.     <div id="contact">
    
51.         <div class="item">我是公司介绍</div>
    
52.         <div class="item">我是关于我们</div>
    
53.         <div class="item">我是新闻资讯</div>
    
54.         <div class="item">我是产品中心</div>
    
55.         <div class="item">我是网站首页</div>
    
56.     </div>
    
57.     <script>
    
58.         var nav = document.querySelector('#nav');
    
59.         var lis = nav.querySelectorAll('li');
    
60.         var items = document.querySelector('#contact').querySelectorAll('.item');
    
61. 
    
62.         for (i = 0; i < lis.length; i++) {
    
63.             lis[i].setAttribute('index', i);
    
64.             lis[i].onclick = function() {
    
65.                 for (var i = 0; i < lis.length; i++) {
    
66.                     lis[i].className = '';
    
67.                 }
    
68.                 this.className = 'cur';
    
69.                 var index = this.getAttribute('index');
    
70.                 for (var i = 0; i < items.length; i++) {
    
71.                     items[i].style.display = 'none';
    
72.                 }
    
73.                 items[index].style.display = 'block';
    
74. 
    
75.             }
    
76.         }
    
77.     </script>

复制代码