JavaScript tab选项卡插件实例代码

2024-05-06 15:01:04

字体：大中小

来源：转载

供稿：网友

今天，先从最简单的开始，将已有的一个Tab选项卡切换功能改写成javascript插件形式。

原生函数写法

将一个javascript方法改写为js插件最简单的方式就是将这个方法挂载到window全局对象下面

我们先来看看最原始的使用函数写法的代码：

tab.html

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta name="renderer" content="webkit"><title>jquery_hjb_tab插件demo</title><link rel="stylesheet" href="h.css"/></head><body><div id="tab"><div class="tabs"><ul><li><a href="#">tab1</a></li><li><a href="#">tab2</a></li><li><a href="#">tab3</a></li><li><a href="#">tab4</a></li></ul></div><div class="tabCons"><section>内容一</section><section>内容二</section><section>内容三</section><section>内容四</section></div></div><script>window.onload = h_tab('tab');function h_tab(tabId){var oLinks = document.getElementById(tabId).getElementsByTagName("a");var oCons = document.getElementById(tabId).getElementsByTagName("section");for(var i = 0; i<oLinks.length; i++){oLinks[i].index = i;oLinks[i].onclick = function () {for(var j =0; j<oLinks.length; j++){oLinks[j].className="";oCons[j].style.display = "none";}this.className="cur";oCons[this.index].style.display ="block";}}}</script>

h.css

@charset "utf-8";/*//author:hjb2722404//description://date:2016/2/18*/.tabs ul { width: 100%; list-style-type: none;}.tabs ul li { width: 48%; display: inline-block; margin: 0; padding: 0;}.tabs ul li a {border-bottom: 3px solid #cccccc; width: 100%; height: 100%; display: block; text-align: center; min-height: 40px; line-height: 40px; text-decoration: none; font-family: "微软雅黑"; color: #a94442}.tabs ul li a.cur { border-bottom: 3px solid #f26123;}.tabCons section { display: none;}.tabCons section:nth-child(1) { display: block;}

上面两份代码为基本代码，之后我们后一步步在这份代码的基础上进行改进。

原生插件写法

好，现在，我们就来将这个方法改写成挂载在window对象下的插件：

tab.html

……// 下面是第一次改动<script type="text/javascript" src="h_tabs.js"></script><script>H_tab("tab");</script></body></html>

h_tabs.js

window.H_tab = function(tabId){var oLinks = document.getElementById(tabId).getElementsByTagName("a");var oCons = document.getElementById(tabId).getElementsByTagName("section");for(var i = 0; i<oLinks.length; i++){oLinks[i].index = i;oLinks[i].onclick = function () {for(var j =0; j<oLinks.length; j++){oLinks[j].className="";oCons[j].style.display = "none";}this.className="cur";oCons[this.index].style.display ="block";}}};

上一篇：简单谈谈javascript中this的隐式绑定

下一篇：javascript下使用Promise封装FileReader