JavaScript实现tab栏切换效果 |
您所在的位置：网站首页 › javascript导航栏 › JavaScript实现tab栏切换效果 |
|
本文实例为大家分享了JavaScript实现tab栏切换效果的具体代码，供大家参考，具体内容如下 Document * { margin: 0; padding: 0; } .box { width: 600px; margin: 100px 500px; border: 1px solid #999; } li { list-style: none; } .tab_top { width: 600px; height: 50px; background-color: #ccc; } .tab_top li { float: left; width: 50px; height: 50px; line-height: 50px; text-align: center; padding: 0 20px; } .current { background-color: red; color: #fff; } .tab_con { width: 600px; height: 300px; background-color: #fff; } 先在css里面设置下面小div全部隐藏 .item { display: none } 标题一 标题二 标题三 标题四 标题五 --->此处默认第一个显示 我是内容一 我是内容一 我是内容一 我是内容一 我是内容一 我是内容二 我是内容二 我是内容二 我是内容二 我是内容二 我是内容三 我是内容三 我是内容三 我是内容三 我是内容三 我是内容四 我是内容四 我是内容四 我是内容四 我是内容四 我是内容五 我是内容五 我是内容五 我是内容五 我是内容五 我是内容五js: //1 上的选项卡 点击某一个 当前这一个底色是红色 其余不变 （排他思想） 修改类名的方法 //获取元素 //01 获取上半部分盒子 var tab_top = document.querySelector('.tab_top'); //02 获取上班部分 所有小li 得到一个数组 var lis = tab_top.querySelectorAll('li'); //03 获取下半部分 所有小div盒子 得到一个数组 var item = document.querySelectorAll('.item') //for 循环所有小li 绑定点击事件 for (var i = 0; i < lis.length; i++) { //开始给上面li设置索引号 属性index 值 i lis[i].setAttribute('index', i); // 注册点击事件 lis[i].onclick = function () { // 来个排他思想 for (var j = 0; j < lis.length; j++) { //先让所有的li 点击没有样式 lis[j].className = ''; } // 谁点击 谁加样式 this.className = 'current' //2 下面显示内容模块也要写在onclick里面 因为一一对应 // 给上面top 所有li 添加index 索引号 属性从0开始 自定义属性 // 上面已经设置好 现在拿来用 var index = this.getAttribute('index'); // 点击上面li 对应下面div显示出来 //再来排他思想 先干掉其他人 让隐藏 点谁 谁显示 for (var k = 0; k < item.length; k++) { //所有的小div 隐藏 item[k].style.display = 'none' } //点击哪个小li 小li的index对应的div 显示 item[index].style.display = 'block'; } }效果图： 如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。 您可能感兴趣的文章:JavaScript实现tab栏切换的效果JS实现简单Tab栏切换案例js tab栏切换代码实例解析JavaScript TAB栏切换效果的示例js实现tab栏切换效果js实现tab栏切换制作JavaScript实现Tab栏切换特效JS实现Tab栏切换的两种方式案例详解JavaScript实现简易tab栏切换案例如何通过JavaScript、css、H5实现简单的tab栏切换和复用功能 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |