用js编写tab栏切换(JavaScript实现简易tab栏切换内容栏)
类别:编程学习 浏览量:1627
时间:2022-03-30 00:41:14 用js编写tab栏切换
JavaScript实现简易tab栏切换内容栏本文实例为大家分享了JavaScript实现简易tab栏切换内容栏的具体代码,供大家参考,具体内容如下
html+css部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 初始化css,因为有默认边距 *{ margin:0; padding:0;} h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;} ol,ul{ list-style:none;} img,fieldset{ border:0 none; display:block;} */ li,ul,li{ box-sizing: border-box; margin: 0; padding: 0; } ul{ list-style-type: none; } a{ text-decoration: none; } #nav{ width: 450px; height: 400px; margin: 100px auto;/*左右居中*/ background-color: pink; padding: 0; font-size: 14px; } li{ float: left; width: 150px; height: 30px; text-align: center; line-height: 0.6rem; border: 0.02rem solid #ccc; } .content{ clear: both; position: relative; } .content li{ width: 450px; height: 370px; position: absolute; display: none; } .tab .choose{ background-color: skyblue; } .content .current{ display: block; } </style> <script src="jQuery.mini.js"></script> </head> <body> <li id="nav"> <li class="tab"> <ul> <li class="choose" ><a href="#" > 1</a></li> <li><a href="#" >2</a></li> <li><a href="#" >3</a></li> </ul> </li> <li class="content"> <li class="current">1</li> <li>2</li> <li>3</li> </li> </li> </body> </html>
原生js代码
var lis = document.querySelectorAll('li'); var lis = document.querySelector('.content').querySelectorAll('li'); for(var i=0 ; i<lis.length ; i++){ lis[i].setAttribute('dateIndex',i);//设置每一个li的index,方便后面锁定内容栏 lis[i].addEventListener('click',function(){ for(var j=0 ; j<lis.length ; j++){ lis[j].className = '';//将所有的li的样式设置为空 } this.className = 'choose';//设置当前点击的li的样式(排他) var index = this.getAttribute('dateIndex');//获取当前li的index // console.log(index); for(var j=0 ; j<lis.length ; j++){ lis[j].className = '';//排他 // lis[i].className = 'choose'; } lis[index].className = 'current'; }) }
## jQuery方法 ```javascript //jQuer方法 $(function(){ $("li").click(function(){ $(this).addClass("choose");//为当前点击的li添加样式 $(this).siblings("li").removeClass("choose");//它的兄弟元素消除样式(排他) var index = $(this).index();//获取当前点击的li的index $(".content li").eq(index).show().siblings("li").hide(); //通过index获取到相对应的内容框,通过show()显示出来,在选取它的兄弟元素隐藏,分解======》 //$(".content li").eq(index).show(); // $(".content li").eq(index).siblings("li").hide() }) })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- js中alert相关知识点(js中getBoundingClientRect 方法案例详解)
- python将对象转换成json(python对象与json相互转换的方法)
- js和php加密(RSA实现JS前端加密与PHP后端解密功能示例)
- js array的所有方法(js 数组 find,some,filter,reduce区别详解)
- angularjs数据绑定类指令及作用(详解Angular数据绑定及其实现方式)
- 动画用css3还是js(前端制作动画的几种方式css3,js)
- python的decode函数在哪个模块(python中报错"json.decoder.JSONDecodeError: Expecting value:"的解决)
- js如何实现定时器功能(js实现0ms延时定时器的几种方式)
- js的showModalDialog的用法
- js中拼接字符串的几种方法
- js怎么上传压缩图片(如何用JS有效的压缩图片)
- js和css哪个重要(js与css的阻塞问题详析)
- Js如何判断浏览器类型和版本
- element-ui 菜单悬停样式(js如何构造elementUI树状菜单的数据结构详解)
- js闭包可以解决哪些问题(JavaScript中let避免闭包造成问题)
- js中substring的用法、与substr的区别
- 《精英律师》剧照首曝光,实力演员飙戏,演绎律政职场百态(精英律师剧照首曝光)
- 靳东领衔打造高精职场 新丽出品《精英律师》曝定妆照(靳东领衔打造高精职场)
- 靳东新剧《精英律师》定档,众星云集,这剧可追(靳东新剧精英律师定档)
- 精英律师 廖佳敏封印恋情曝光,顾婕马失前蹄 你个老不死的(廖佳敏封印恋情曝光)
- 以家人之名广受好评,剧情生动引起观众共鸣,演员张新成圈粉无数(以家人之名广受好评)
- 三兄妹感情再遇波折,人设接连崩塌 《以家人之名》剧情猜不透(三兄妹感情再遇波折)
热门推荐
- mysql创建数据库教程(MySQL创建数据库并支持中文字符的操作方法)
- sql server2012下载安装教程(SQL Server 2012 安装与启动图文教程)
- nginxssl证书怎么设置(nginx结合openssl实现https的方法)
- yii框架使用教程(Yii框架操作cookie与session的方法实例详解)
- laravel count 报错(解决laravel5.5访问public报错的问题)
- python导出数据到mysql(python定时按日期备份MySQL数据并压缩)
- python 队列与列表(Python实现的栈、队列、文件目录遍历操作示例)
- python爬虫开源代码(Python实现的文轩网爬虫完整示例)
- canvas两种形式动画(用canvas做一个DVD待机动画的实现代码)
- nginx django部署(uwsgi+nginx代理Django无法访问静态资源的解决)