了解了面向对象之后，那我们来写下选项卡，，，
面向对象的选项卡
原则
先写出普通的写法，然后改成面向对象写法
普通方法变型
尽量不要出现函数嵌套函数
可以有全局变量
把onload中不是赋值的语句放到单独函数中
改成面向对象
全局变量就是属性
函数就是方法
Onload中创建对象
改this指向问题
<style>
#div1 div, #div2 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
.active{ background:red;}
</style>
<script>
var oParent = null;
var aInput = null;
var aDiv = null;
window.onload=function(){
var oParent = document.getElementById("div1");
var aInput = oParent.getElementsByTagName("input");
var aDiv = oParent.getElementsByTagName("div");
init();
};
function init(){
for(var i=0; i<aInput.length;i++){
aInput[i].index = i;
aInput[i].onclick=change;
}
}
function change(){
for(var i=0; i<aInput.length;i++){
aInput[i].className="";
aDiv[i].style.display="none";
}
this.className="active";
aDiv[this.index].style.display="block";
}
</script>
<div id="div1">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block">11111</div>
<div>22222</div>
<div>33333</div>
</div>
这个是我们的传统写法
下面是我们改成面向对象的写法：
<style>
#div1 div, #div2 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
.active{ background:red;}
</style>
<body>
<script>
window.onload = function(){
var t1 = new Tab("div1");
t1.init();
}
function Tab(id){
this.oParent = document.getElementById(id);
this.aInput = this.oParent.getElementsByTagName("input");
this.aDiv = this.oParent.getElementsByTagName("div");
this.iNow = 0;
}
Tab.prototype.init = function(){
var This = this;
for(var i=0; i<this.aInput.length;i++){
this.aInput[i].index = i;
this.aInput[i].onclick=function(){
This.change(this);
}
}
}
Tab.prototype.change = function(obj){
for(var i=0; i<this.aInput.length;i++){
this.aInput[i].className="";
this.aDiv[i].style.display="none";
}
obj.className="active";
this.aDiv[obj.index].style.display="block";
}
</script>
<div id="div1">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block">11111</div>
<div>22222</div>
<div>33333</div>
</div>
看代码的话，简单的功能可能用面向对象会觉得还复杂些。
如果说我们页面中有多个选项卡，第二选项卡多了一个自动播放的功能，，
那么我们可以这样添加
<style>
#div1 div, #div2 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
.active{ background:red;}
</style>
<body>
<script>
window.onload = function(){
var t1 = new Tab("div1");
t1.init();
var t2 = new Tab("div2");
t2.init();
t2.autoPlay();
}
function Tab(id){
this.oParent = document.getElementById(id);
this.aInput = this.oParent.getElementsByTagName("input");
this.aDiv = this.oParent.getElementsByTagName("div");
this.iNow = 0;
}
Tab.prototype.init = function(){
var This = this;
for(var i=0; i<this.aInput.length;i++){
this.aInput[i].index = i;
this.aInput[i].onclick=function(){
This.change(this);
}
}
}
Tab.prototype.change = function(obj){
for(var i=0; i<this.aInput.length;i++){
this.aInput[i].className="";
this.aDiv[i].style.display="none";
}
obj.className="active";
this.aDiv[obj.index].style.display="block";
}
Tab.prototype.autoPlay = function(){
var This = this;
setInterval(function(){
if(This.iNow == This.aInput.length-1){
This.iNow = 0;
}
else{
This.iNow++;
}
for(var i=0;i<This.aInput.length;i++){
This.aInput[i].className = '';
This.aDiv[i].style.display = 'none';
}
This.aInput[This.iNow].className = 'active';
This.aDiv[This.iNow].style.display = 'block';
},2000);
}
</script>
<div id="div1">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block">11111</div>
<div>22222</div>
<div>33333</div>
</div>
<div id="div2">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
<div style="display:block">11111</div>
<div>22222</div>
<div>33333</div>
<div>44444</div>
</div>
</body>
这样看就觉得好用多了
相关推荐
本篇将深入探讨如何使用面向对象的方法来编写一个支持click和mouseover切换方式的tab选项卡插件。 首先，我们需要定义一个Tab类，这个类应该包含以下属性： 1. **选项卡标题列表**：存储所有选项卡的标题。 2. **...
在本文中，我们将探讨如何使用面向对象的技术来实现一个tab选项卡效果。 首先，了解基本的HTML结构对于实现tab选项卡至关重要。基本的HTML结构由几个部分组成： 1. tab列表项：通常是一个无序列表`<ul>`，列表项`...
然后是JavaScript代码的讲解，这是实现面向对象选项卡功能的核心部分。在这部分代码中定义了一个`Tab`类，该类用于封装与选项卡相关的所有功能。类中包含了`switch`方法，该方法用于控制选项卡的切换逻辑，即在点击...
在实际开发过程中，为了使代码更具可维护性和可复用性，通常会将JavaScript代码组织成模块，使用模块化或面向对象的编程方式。对于CSS，可以考虑使用预处理器如Sass或Less，以提高代码的结构性和可扩展性。 总结来...
在这个名为"ios-选项卡.zip"的压缩包中，作者gouhanghang分享了一个自定义选项卡组件的示例项目——ParentTAB_GH，该项目展示了如何实现可伸缩、可多选和可单选的选项卡功能。 首先，我们来看看"可伸缩"这个特性。...
本封装的选项卡功能具有可嵌套和可重复使用的特性，这使得它更灵活，适用于各种复杂的网页布局。 首先，让我们了解一下面向对象编程（OOP）的基本概念。在JavaScript中，尽管它原生并不完全支持面向对象，但可以...
本文主要介绍如何使用JavaScript面向对象编程技术实现网页上的TAB选项卡菜单效果。通过面向对象的方法，我们能够更好地组织代码结构，使代码更加模块化、易于维护和扩展。同时，代码示例将展示如何通过鼠标滑过...
在IT行业中，开发一款自定义浏览器是常见的挑战之一，尤其是涉及到选项卡功能。"C#自作浏览器选项卡"这个话题聚焦于使用C#编程语言创建一个具备多选项卡界面的浏览器应用。C#，全称C Sharp，是微软公司推出的一种...
本项目“C#选项卡记事本程序”旨在实现一个具有多选项卡功能的文本编辑器，类似于微软的Notepad++或Visual Studio Code。这个程序允许用户在一个单一的应用窗口内打开并编辑多个文本文件，通过选项卡进行切换，提供...
4. **JavaScript事件处理**：理解并熟练运用JavaScript的事件模型（如DOM2级事件模型）是实现滑动门和选项卡功能的关键。常见的事件有点击（click）、滚动（scroll）、鼠标悬停（hover）等，这些事件可以绑定到特定...
- **编译与安装**：完成组件开发后，需要编译生成`.dpk`包文件，然后在Delphi IDE中通过项目选项(`Project Options`)的“包”选项卡中添加该包，以便在IDE中使用。 #### 示例分析： 以`TClock`组件为例，它包含了...
此外，为了确保代码的简洁性和可维护性，可以考虑使用模块化和面向对象编程，将选项卡功能封装成一个可复用的组件。例如，可以创建一个`TabbedPane`类，包含初始化、添加选项卡、切换选项卡等方法。这样，即使在大型...
在本文中，我们将深入探讨如何使用ES6的面向对象特性来模拟浏览器网页顶部的切换栏。...通过这种方式，我们利用ES6的面向对象特性，实现了模块化和易于维护的代码，有效地模拟了浏览器顶部的选项卡切换功能。
本项目" C#165以选项卡方式显示窗体和图片 源代码"是一个实例，它展示了如何利用.NET Framework或.NET Core中的Windows Forms技术来构建一个具有选项卡功能的UI，同时在每个选项卡上显示不同的窗体和图像。...
在这个"02-js面向对象考核-tab栏案例"中，我们可以深入探讨JavaScript面向对象编程在实际项目中的应用，尤其是如何使用它来实现tab栏切换功能。 首先，让我们理解面向对象的基本概念。在JavaScript中，对象是键值对...
8. **用户交互设计**：最后，考虑到用户体验，应确保动画效果既美观又不影响功能的正常使用，例如避免过度的视觉干扰，提供适当的反馈，使用户能够清楚地了解当前选中的选项卡。 总之，实现一个动感拉帘式TAB选项卡...