JS如何实现的Tab选项卡
这篇文章主要介绍JS如何实现的Tab选项卡，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
成都创新互联网站建设公司是一家服务多年做网站建设策划设计制作的公司,为广大用户提供了成都做网站、成都网站设计，成都网站设计，一元广告，成都做网站选成都创新互联，贴合企业需求，高性价比，满足客户不同层次的需求一站式服务欢迎致电。
具体如下：
Tab选项卡案例
下面是一个简单面向过程的Tab选项卡。
选项卡
这是主页内容
这是说说内容
这是日志内容
下面来慢慢改成面向对象的形式。
1.首先将嵌套的函数拿到window.onload外面，不能有函数嵌套，可以有全局变量。如下：所有的改写最终效果都不变。
2.将全局的变量变为对象的属性，全局的函数变为对象的方法；将window.onload里的代码提取到一个构造函数里面，在window.onload里创建对象即可；(下面的代码执行起来是有问题的)。
这里必须注意：在构造函数Tab里的this跟之前this所代表的是不同的(此处是通过new来创建对象的)；在上面的示例中，this指的是调用者；在构造函数里，this指向的是var tab = new Tab() ，即tab这个对象，注意是对象。
说一下这段代码的问题：我们在Tab的原型上添加clickBtn方法后，clickBtn方法里的this本应该是指向var tab = new Tab()的，但是我们在 this.tabBtn[i].onclick = this.clickBtn; 将clickBtn添加给了this.tabBtn[i]，即input按钮，clickBtn的所属由Tab对象变成了input按钮。
clickBtn的所属变成input按钮后，那么clickBtn里的this指向按钮，那再来看clickBtn里的代码，this.tabBtn、this.tabDiv，input按钮里有这两个属性吗？没有，所以会出错！
3.将clickBtn的调用放在一个函数里，这样就不会改变clickBtn的所属了。alert(this);此时弹出的是一个Object，说明clickBtn的所属关系没变，还是Tab对象。但是还有另一个问题，此时clickBtn里的this指向tab对象，那么this.className、this.index，此处的this指的是tab对象，那么对象中有这两个属性吗？没有，还会出错！所以第4步继续改造。
window.onload = function(){
var tab = new Tab("tabBox");
}
/**
* 选项卡
* @param {Object} id：选项卡id
*/
function Tab(id){
var tabBox = document.getElementById(id);
this.tabBtn = tabBox.getElementsByTagName('input');
this.tabDiv = tabBox.getElementsByTagName('div');
for(var i=0;i4. 以参数的形式将点击的按钮传入clickBtn中
window.onload = function(){
var tab = new Tab("tabBox");
}
/**
* 选项卡
* @param {Object} id：选项卡id
*/
function Tab(id){
var tabBox = document.getElementById(id);
this.tabBtn = tabBox.getElementsByTagName('input');
this.tabDiv = tabBox.getElementsByTagName('div');
for(var i=0;i5.最终版 —— 将代码提取到一个单独的js文件中，在用的时候引入即可。一般花大时间去写一个面向对象的程序，就是为了能够复用，以及方便的使用。
Tab.js
/**
* 选项卡
* @param {Object} id 选项卡id
*/
function Tab(id){
var tabBox = document.getElementById(id);
this.tabBtn = tabBox.getElementsByTagName('input');
this.tabDiv = tabBox.getElementsByTagName('div');
for(var i=0;i使用：tab.html 可以看到使用的时候，就可以很简单的创建两个选项卡出来了。
选项卡
这是主页内容
