说说用原生js实现封装一个选项卡的功能

说说用原生js实现封装一个选项卡的功能,第1张

说说用原生js实现封装一个选项卡的功能 Tab栏切换(重点)

这是一个重点案例,是前端人员的必备技能!!你必须要把这个案例给写会!!!!

案例分析

①Tab栏切换有2个大的模块

②上的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式

③下面的模块内容,会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。

④规律:下面的模块显示内容和上面的选项卡一一对应,相匹配。

⑤核心思路: 给上面的tab_list 里面的所有小li 添加自定义属性,属性值从0开始编号。

(这个案例里面用到了自定义属性!!!!!!!!!!!!!!)

⑥ 当我们点击tab_list 里面的某个小li,让tab_con 里面对应序号的 内容显示,其余隐藏(排他思想)

<script>       var tab_list = document.querySelector('.tab_list');       var lis = tab_list.querySelectorAll('li');       for(var i = 0; i < lis.length; i++){ lis[i].onclick = function(){     for(var j = 0; j < lis.length; j++){         lis[j].className = '';     }     this.className = 'current'; }       }    </script>

这个是做上面的模块所用的样式代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>document</title>    <style>        * { margin: 0; padding: 0;        }     li { list-style-type: none;        }     .tab {  width: 978px; margin: 100px auto;        }             .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></head><body>  <!--大盒子叫tab,里面有上下2个盒子,一个叫tab_list,一个叫tab_con-->  <!--tab_list里面有5个li-->    <!--tab_con里面有5个div-->  <!--5个li和5个div是一一对应的关系-->    <div class="tab">        <div class="tab_list"> <ul>     <li class="current">商品介绍</li>     <li>规格与包装</li>     <li>售后保障</li>     <li>商品评价(50000)</li>     <li>手机社区</li> </ul>        </div>     <div class="tab_con"> <!-- block除了有转为块级元素以外,还有显示的意思 --> <!-- 行内元素层级高,把上面的display:none给覆盖了 --> <div class="item" style="display: block;">     商品介绍模块内容 </div> <div class="item">     规格与包装模块内容 </div> <div class="item">     售后保障模块内容 </div> <div class="item">     商品评价(50000)模块内容 </div> <div class="item">     手机社区模块内容 </div>        </div> </div>    <script>        //1. 上的模块选项卡:点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式        // 获取元素        var tab_list = document.querySelector('.tab_list');                var lis = tab_list.querySelectorAll('li');        var items = document.querySelectorAll('.item');  //里面有5个小li,必定要用循环        //for循环绑定点击事件        for(var i = 0; i < lis.length; i++){ //开始给5个小li设置一个自定义属性:索引号index lis[i].setAttribute('index',i)          //所有的孩子都要有onclick绑定事件 lis[i].onclick = function(){     //排他思想:干掉所有人,其余的li清除class这个类     for(var i = 0; i < lis.length; i++){         lis[i].className = '';     }     //留下我自己     this.className = 'current';          //2.下面的显示内容模块   //得到当前的属性的值     var index = this.getAttribute('index');     // console.log(index);     //再用一次排他思想:干掉所有人,让其余的item 这些div隐藏     for(var j = 0; j < items.length; j++){         items[j].style.display = 'none';     }     //留下我自己 让对应的item显示出来     items[index].style.display = 'block'; }        }    </script></body></html>

这个是2个模块都完成的最终代码。(这个我独立写我也写不出来)

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/4936659.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-11-13
下一篇 2022-11-13

发表评论

登录后才能评论

评论列表(0条)

保存