本文实例为大家分享了JS实现简单Tab栏切换的具体代码,供大家参考,具体内容如下
要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变。
结构分析:
全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子。
上面的盒子放了 5个li,装着5个小的选项卡,默认会有一个被选中;
下面的盒子也包含了 5个 div 模块,模块内容与上面的选项一一对应,当前默认的只有第一个 div会被显示出来。
实现思路:
点击切换选项卡部分
Tab 栏切换有2个大的 模块
1、上面模块的选项卡,点击某一个,改变当前样式,底色变为红色,字体颜色变为白色。而其他的选项卡样式不发生改变(排他思想)
通过修改类名的方式实现。
2、下面模块的内容,会随着上面的选项卡变化。所以下面模块变化写到点击事件里面。
规律:下面的模块显示的内容和上面选项卡一一对应,相匹配。
核心思路:给上面模块里面所有的 li 添加自定义属性,属性值从 0 开始作为索引号。
排他思想:通过 for循环遍历数组中的元素,进入循环之后首先消除所有部分的样式,接着再为所点击的当前部分添加样式。
通过 setAttribute(name,value)创建自定义属性,name指的是为元素设置的自定义属性,value为自定义属性添加的属性值。
通过 getAttribute(name)获取元素的属性。name是属性的名称。
默认第一个选项卡对应的下面模块是显示的,需要在添加行内样式(style='display:block')因为CSS行内样式的优先级高于外部样式,会优先显示。
而(items[index].style.display = 'block';)这一句也相当于创建了行内样式。
实现代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab栏切换</title> <style> *{ margin:0; padding:0; } .tab{ width:800px; height:45px; border:1px solid #ccc; border-bottom:1px solid #c81623; background: #fafafa; position:relative; margin:100px auto; } .tab_list li{ width:160px; height:45px; list-style:none; line-height:45px; text-align: center; float:left; } .tab_list .current{ background-color:#c81623; color:#fff; } .item{ width:800px; height: 200px; padding-top:40px; /*line-height:200px;*/ font-size: 30px; color:#fff; text-align: center; text-shadow:2px 2px 4px #000000; background: #efefef; /*opacity: 0.8;*/ top:47px; position:absolute; } </style> </head> <body> <div class='tab'> <div class='tab_list'> <ul> <li class='current'>个性推荐</li> <li>歌单</li> <li>主播电台</li> <li>排行榜</li> <li>歌手</li> </ul> </div> <div class='tab_con'> <div class="item one" style='display:block'>每日歌曲推荐</div> <div class="item two">精品歌单倾心推荐,给最懂音乐的你</div> <div class="item thr">上瘾烟嗓情感之声</div> <div class="item fou">新歌飙升榜</div> <div class="item fiv">歌手排行榜</div> </div> </div> <!-- tab 栏切换有2个模块 模块的选项卡,点击其中的某一个,被点击的这一个底色将变成红色的,其余的不变(排他思想)使用修改类的名称的方式。 --> <!-- 下面显示模块内容,会随着上面的选项卡变化,所以下面模块变化写到点击事件里面。 规律:下面模块显示内容和上面的选项卡一一对应,相匹配。 --> <script> var tab_list = document.querySelector('.tab_list'); var lis = tab_list.querySelectorAll('li'); var items = document.querySelectorAll('.item'); //for 循环绑定点击事件 for(var i=0;i < lis.length;i++){ lis[i].setAttribute('index',i); lis[i].onclick = function() { // for(var i=0;i < lis.length;i++){ lis[i].className = ''; } //留下现在需要用的 this.className = 'current'; //下面显示内容模块 var index = this.getAttribute('index'); console.log(index); //去掉其他的 item,让这些隐藏起来 //只留下当前的 item,让它显示出来 for(var i=0;i<items.length;i++){ items[i].style.display='none'; } items[index].style.display = 'block'; } } </script> </body> </html>
实现效果:
点击其它选项
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。