一、选项卡的两种实现方式

<!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>.wrap {width: 500px;height: 500px;margin: 50px auto;}.tab {height: 50px;}.tab .item {float: left;width: 100px;height: 100%;text-align: center;line-height: 50px;}.tab .item.current {background-color: #000;color: #fff;}.page {position: relative;height: 450px;border: 1px solid #000;}.page .item {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;font-size: 100px;text-align: center;line-height: 450px;}.page .item.active {display: block;}</style>
</head><body><div class="wrap"><div class="tab J_tab"><div class="item current">选项1</div><div class="item">选项2</div><div class="item">选项3</div></div><div class="page J_page"><div class="item active">页面1</div><div class="item">页面2</div><div class="item">页面3</div></div></div>
</body></html>

（1）方法一

<script>; (function (doc) {var oTab = doc.getElementsByClassName('J_tab')[0],oPage = doc.getElementsByClassName('J_page')[0],tabItems = oTab.getElementsByClassName('item'),pageItems = oPage.getElementsByClassName('item');var init = function () {bindEvent();}function bindEvent() {oTab.addEventListener('click', tabClick, false);}function tabClick() {var e = e || window.event,tar = e.target || e.srcElement,className = tar.className;if (className === 'item') {var curIdx = Array.prototype.indexOf.call(tabItems, tar);for (var i = 0; i < tabItems.length; i++) {tabItems[i].className = 'item';pageItems[i].className = 'item';}tar.className += ' current';pageItems[curIdx].className += ' active';}}init();})(document);
</script>

（2）方法二（不用for循环）

<script>; (function (doc) {var oTab = doc.getElementsByClassName('J_tab')[0],oPage = doc.getElementsByClassName('J_page')[0],tabItems = oTab.getElementsByClassName('item'),pageItems = oPage.getElementsByClassName('item'),curIdx = 0;var init = function () {bindEvent();}function bindEvent() {oTab.addEventListener('click', tabClick, false);}function tabClick() {var e = e || window.event,tar = e.target || e.srcElement,className = tar.className;if (className === 'item') {tabItems[curIdx].className = 'item';pageItems[curIdx].className = 'item';curIdx = Array.prototype.indexOf.call(tabItems, tar);tar.className += ' current';pageItems[curIdx].className += ' active';}}init();})(document);
</script>

（3）优化版

<script>; (function (doc) {var oTab = doc.getElementsByClassName('J_tab')[0],oPage = doc.getElementsByClassName('J_page')[0],tabItems = oTab.getElementsByClassName('item'),pageItems = oPage.getElementsByClassName('item'),curIdx = 0;var init = function () {bindEvent();}function bindEvent() {oTab.addEventListener('click', tabClick, false);}function tabClick() {var e = e || window.event,tar = e.target || e.srcElement,className = tar.className;if (className === 'item') {tabChange(tar);}}function tabChange(target) {tabItems[curIdx].className = 'item';pageItems[curIdx].className = 'item';curIdx = Array.prototype.indexOf.call(tabItems, target);tar.className += ' current';pageItems[curIdx].className += ' active';}init();})(document);
</script>

【JS提升】选项卡的两种实现方式相关推荐

php文本框限制字节,js限制文本框输入长度两种限制方式(长度、字节数)_基础知识...
功能/特点: 1.实时显示可输入的字数(字节数) 2.两种限制方式(长度.字节数) 3.中文输入法下可正常使用,无BUG 4.同一页面可以使用多个,相互不干扰 limit.js function li ...
基于ArcGIS JS API实现的两种距离和面积测量方式
文章目录前言开发思路主要代码效果测试效果图测试页面开发总结参考链接前言在一些地图地图应用中,距离.面积测量属于基础功能.ArcGIS API for JavaScript有单独提供 ...
Windows校验文件哈希hash的两种常用方式
大家经常都到哪儿去下载软件和应用程序呢?有没想过下载回来的软件.应用程序或资源是否安全呢?在 Windows 10 和 Office 2016 发布当初,很多没权限的朋友都使用第三方网站去下载安装映像 ...
(转)javabean是什么和总结javabean的两种使用方式
一. javabean 是什么? Javabean 就是一个类,这个类就定义一系列 get<Name> 和 set<Name> 方法. So simple ! Javabean ...
android密码dakay,安卓中按钮点击事件onClick的两种实现方式
很多的语言都有一些共同的特点,比如OnClick这个东西,可能我们能在js中见到,当然在安卓中也有,可能其他的编程语言也会有这个东西,刚好今天学了这个玩意在安卓中的写法. 点击事件大多用在Button ...
android中资源文件的两种访问方式,Android_Android学习笔记-保存文件（Saving Files），Android设备有两种文件存储区域 - phpStudy...
Android学习笔记-保存文件(Saving Files) Android设备有两种文件存储区域: 内部存储和外部存储 ("internal" and "externa ...
斑马打印机客户端GET和POST，以及后端两种打印方式。
斑马打印机客户端GET和POST,以及后端两种打印方式. 背景环境:打印机安装在客户端外网.当用户登录时,通过ajax取服务器数据,返回打印机命令,然后客户端通过JS发送给斑马打印机. 1.使用Get ...
php闪屏程序,节日闪屏的两种构成方式
> 摘要: 每逢节日到来,当你打开QQ浏览器,发现有什么不同吗?QQ浏览器已经悄悄的送出了节日的关怀,呈现在你眼前的是朴实而又温情的画面节日闪屏.她是浏览器和用户情感交流的窗口,也每逢节日到来 ...
帆软BI中界面上如果要替换原有的组件，两种替换方式
通过查看源码js得知,BI中的组件有两种书写方式,第一种就是类似: var He = function (e) {var t, i;function n() {};i = e;t = n;t.prot ...

【JS提升】选项卡的两种实现方式

一、选项卡的两种实现方式

（1）方法一

（2）方法二（不用for循环）

（3）优化版

【JS提升】选项卡的两种实现方式相关推荐

最新文章

热门文章