js原生tab栏切换(JavaScript实现简易tab栏切换案例)
类别:编程学习 浏览量:642
时间:2022-01-21 00:45:05 js原生tab栏切换
JavaScript实现简易tab栏切换案例本文实例为大家分享了JavaScript实现简易tab栏切换效果的具体代码,供大家参考,具体内容如下
1. tab栏-案例1
tab栏分析
li里面的分析
js实现隐藏与显示
排他思想:
1)、所有元素全部清除样式(干掉其他人)
2)、给当前元素设置样式 (留下我自己)
3)、注意顺序不能颠倒,首先干掉其他人,再设置自己
我的思路:
代码实现:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; color: #666; } .vertical-tab { width: 980px; margin: 100px auto; } .vertical-tab .nav { width: 200px; list-style: none; } .vertical-tab .nav-tabs1 { float: left; border-right: 3px solid #e7e7e7; } .vertical-tab .nav-tabs2 { float: right; border-left: 3px solid #e7e7e7; } .vertical-tab li a { display: block; padding: 10px 20px; text-align: center; text-transform: uppercase; letter-spacing: 1px; font-size: 18px; font-weight: 700; } .vertical-tab .active { color: #198df8; } .vertical-tab .tabs { width: 500px; float: left; } .vertical-tab .tab-content { padding: 10px 20px; text-transform: uppercase; letter-spacing: 1px; } .vertical-tab .tab-content h3 { color: #333; margin: 0 0 10px 0; } .vertical-tab .tab-content p { font-size: 12px; } .vertical-tab .hidden { display: none; } </style> </head> <body> <li class="vertical-tab"> <ul class="nav nav-tabs1"> <li><a href="javascript:;" class="active" index="1">section 1</a></li> <li><a href="javascript:;" index='2'>section 2</a></li> <li><a href="javascript:;" index="3">section 3</a></li> </ul> <li class="tab-content tabs"> <li class="tab-content1"> <h3>section 1</h3> <p>content 1</p> </li> <li class="tab-content1 hidden"> <h3>section 2</h3> <p>content 2</p> </li> <li class="tab-content1 hidden"> <h3>section 3</h3> <p>content 3</p> </li> <li class="tab-content1 hidden"> <h3>section 4</h3> <p>content 4</p> </li> <li class="tab-content1 hidden"> <h3>section 5</h3> <p>content 5</p> </li> <li class="tab-content1 hidden"> <h3>section 6</h3> <p>content 6</p> </li> </li> <ul class="nav nav-tabs2"> <li><a href="javascript:;" index="4">section 4</a></li> <li><a href="javascript:;" index="5">section 5</a></li> <li><a href="javascript:;" index="6">section 6</a></li> </ul> </li> <script> var as = document.querySelectorAll("a") var item = document.querySelectorAll(".tab-content1") console.log(as) // console.log(lis) for (var i = 0; i < as.length; i++) { as[i].addEventListener('click', function() { // 干掉其他人 for (var j = 0; j < as.length; j++) { as[j].className = '' } // 留下自己 this.className = "active" // 显示内容 var index = this.getAttribute('index') console.log(index) // 干掉其他人 for (var i = 0; i < item.length; i++) { item[i].style.display = "none" } // 留下自己 item[index - 1].style.display = "block" }) } </script> </body> </html>
vue实现
vue实现起来相对简单,只需要灵活运用v-if和v-for
具体代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } .vertical-tab { width: 920px; margin: 100px auto; } .vertical-tab .nav { list-style: none; width: 200px; } .vertical-tab .nav-tabs1 { border-right: 3px solid #e7e7e7; } .vertical-tab .nav-tabs2 { border-left: 3px solid #e7e7e7; } .vertical-tab .nav a { display: block; font-size: 18px; font-weight: 700; text-align: center; letter-spacing: 1px; text-transform: uppercase; padding: 10px 20px; margin: 0 0 1px 0; text-decoration: none; } .vertical-tab .tab-content { color: #555; background-color: #fff; font-size: 15px; letter-spacing: 1px; line-height: 23px; padding: 10px 15px 10px 25px; display: table-cell; position: relative; } .vertical-tab .nav-tabs1 { float: left; } .vertical-tab .tabs { width: 500px; box-sizing: border-box; float: left; } .vertical-tab .tab-content h3 { font-weight: 600; text-transform: uppercase; margin: 0 0 5px 0; } .vertical-tab .nav-tabs2 { float: right; } .tab-content { position: relative; } .tab-content .tab-pane { position: absolute; top: 10px; left: 20px; } .nav li.active a { color: #198df8; background: #fff; border: none; } .fade { opacity: 0; transition: all .3s linear; } .fade.active { opacity: 1; } </style> </head> <body> <li class="vertical-tab" id="app"> <!-- Nav tabs --> <ul class="nav nav-tabs1"> <li v-on:click='change(index,0)' :class='currentIndex==index?"active":""' v-if="index < list.length/2" v-for="(item, index) in list"><a href="#" rel="external nofollow" rel="external nofollow" > {{item.title}} </a></li> </ul> <!-- Tab panes --> <li class="tab-content tabs"> <li class="tab-pane fade" :class='currentIndex==index?"active":""' :key='item.id' v-for='(item, index) in list'> <h3>{{item.title}}</h3> <p>{{item.content}}</p> </li> </li> <!-- Nav tabs --> <ul class="nav nav-tabs2"> <li v-on:click='change(index,1)' :class='currentIndex==index?"active":""' v-if="index >= list.length/2" v-for="(item, index) in list"><a href="#" rel="external nofollow" rel="external nofollow" > {{item.title}} </a></li> </ul> </li> <script type="text/javascript" src="js/vue.js"></script> <script> new Vue({ el: "#app", data: { currentIndex: 0, // 选项卡当前的索引 list: [{ id: 1, title: 'Section 1', content: 'content1' }, { id: 2, title: 'Section 2', content: 'content2' }, { id: 3, title: 'Section 3', content: 'content3' }, { id: 4, title: 'Section 4', content: 'content4' }, { id: 5, title: 'Section 5', content: 'content5' }, { id: 6, title: 'Section 6', content: 'content6' }] }, methods: { change(index, flag) { if (flag) { console.log(index) this.currentIndex = index; } else { this.currentIndex = index; } } } }) </script> </body>
如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 使用vue-cli构建electron项目(MAC+PyCharm+Flask+Vue.js搭建系统)
- element-ui 菜单悬停样式(js如何构造elementUI树状菜单的数据结构详解)
- 常用的几种jsp开发环境搭建(怎么一键安装Jsp网站程序?Jsp环境一键配置软件JspStudy推荐)
- php生成json信息(php使用json-schema模块实现json校验示例)
- Extjs中文乱码
- vuejs全家桶入门教程交流(Vue全家桶入门基础教程)
- JS中sort()和reverse()
- Json序列化对象的部分属性值
- js时间日期处理
- python 接口测试怎么校验json数据(python接口自动化十七--Json 数据处理---一次爬坑记详解)
- nodejs 内部模块代码(详解Node.js如何处理ES6模块)
- nginx安全配置提示(wdcp Linux面板nginx启用gzip后js未压缩解决方案)
- js中字符串拼接
- 带农历的js日期控件
- packagejson怎么使用(最全的package.json解析)
- js的遍历数组方法(JS中数组常用的循环遍历你会几种)
- 全球科技界最有钱大佬TOP 15 你知道几位(全球科技界最有钱大佬TOP)
- 2主力后腰缺阵 泰山队奇兵有望获重用,赛季0出场,迎来中超首秀(泰山队奇兵有望获重用)
- 三分71 生死战爆发 篮网旧将丁威迪今天成奇兵,助队赢球(三分71生死战爆发)
- 《红 雄安》系列广播剧第一集 水上奇兵雁翎队(雄安系列广播剧第一集)
- 小说 小伙穿越成刘备,用现代知识指挥作战,众谋士都看呆了(小伙穿越成刘备)
- 解析葡萄牙6-1瑞士 进攻多点开花,贡萨洛-拉莫斯一战成名(解析葡萄牙6-1瑞士)
热门推荐
- nginx过滤器漏洞(Nginx反爬虫策略,防止UA抓取网站)
- python识别验证码教程(Python3.5 + sklearn利用SVM自动识别字母验证码方法示例)
- 怎样解除阿里云账号(如何注销阿里云账号 阿里云账号注销图文教程)
- html5的新特性
- docker停止删除所有容器方法(Docker stop停止/remove删除所有容器)
- 搭建web服务器的步骤(windows下三种web服务器搭建方式)
- 网站友好性的几个建议
- sql 如何拆分字符串(SQL Server实现将特定字符串拆分并进行插入操作的方法)
- php简单定时执行任务(php实现 master-worker 守护多进程模式的实例代码)
- 织梦dede数据库(dedeCMS 织梦的日期时间格式大全最新)