用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运算符使用教程(js中不常见的运算符与操作符总结)
- 创建jsp时如何默认生成的是utf-8(js判断文件是否为utf-8编码的方法)
- 使用Console调试js脚本
- js原生tab栏切换(JavaScript实现简易tab栏切换案例)
- jsonkeyvalue怎么取(替换json对象中的key最佳方案)
- nodejs游戏服务端框架(如何写Node.JS版本小游戏)
- vuejs filter过滤器的使用(Vue过滤器filter实现及应用场景详解)
- Extjs中FieldSet的收缩和展开
- nodejs启动web服务器(使用NODE.JS创建一个WEBSERVER服务器的步骤)
- extjs中Toolbar工具栏
- nodejs请求页面(node.js+postman实现模拟HTTP服务器与客户端交互)
- next js上线(Next.js入门使用教程)
- angularjs使用指令(详解Angular路由动画及高阶动画函数)
- js的遍历数组方法(JS中数组常用的循环遍历你会几种)
- js和css哪个重要(js与css的阻塞问题详析)
- Json序列化对象的部分属性值
- 吴启华与曾舜晞两代张无忌同框,戏里经典的他却没活出原著的潇洒(吴启华与曾舜晞两代张无忌同框)
- 经常发这三种 朋友圈 的人,要迅速屏蔽(经常发这三种朋友圈)
- 有种尴尬叫朋友圈忘屏蔽,大学生上演社死现场,父母亲自下场吐槽(有种尴尬叫朋友圈忘屏蔽)
- 朋友圈屏蔽你的人,可以直接看淡了(朋友圈屏蔽你的人)
- 金球奖只青睐那些会戴珠宝的女人(金球奖只青睐那些会戴珠宝的女人)
- 浙江省一个县,人口超40万,建县历史超1100年(浙江省一个县人口超40万)
热门推荐
- mysql mvcc 隔离级别(详解MySQL事务的隔离级别与MVCC)
- dedecms标题在哪改(织梦DEDECMS文章拼音命名规则时去掉id的方法)
- reactnative示例代码(React Native项目框架搭建的一些心得体会)
- dedecms后台关键词(DedeCms防止垃圾文章群发、垃圾评论和注册的方法)
- sql自动化上线平台(sql自动化检查和分析工具 之soar和soar-web 安装和使用体验)
- sql server 2012 错误5123(SQL SERVER 9003错误解决方法)
- vmwareesxi怎么安装(vmware esxi6.5安装使用详细步骤)
- apache和php如何配置(Apache2与PHP5 for WinXP简单配置技巧)
- dedecms手机页面怎么固定(织梦dedecms配置手机wap站点并绑定二级域名)
- 怎么搭建个人云服务器(怎么使用云服务器搭建个人网站?)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9