选项卡,面向对象

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="description" content="" />
<title>面向对象选项卡</title>
<style>
.on{ background:#399; color:#fff;}
.box div{ width:300px; height:300px; border:1px solid #000; display:none;}
</style>
<script>
function tap(id)
{
if(!id) return
this.oBox=document.getElementById(id);
this.aBtn=this.oBox.getElementsByTagName(‘input‘);
this.aDiv=this.oBox.getElementsByTagName(‘div‘);

this.init();
};

tap.prototype.init=function(){
var _this=this;
for(var i=0;i<this.aBtn.length;i++)
{
(function(index){
_this.aBtn[i].onclick=function(){
_this.fnClick(index)
};
})(i);
};
};
tap.prototype.fnClick=function(index){
for(var i=0;i<this.aBtn.length;i++)
{
this.aBtn[i].className=‘‘;
this.aDiv[i].style.display=‘none‘;
}
this.aBtn[index].className=‘on‘;
this.aDiv[index].style.display=‘block‘;
};

function autoTap(id)
{
tap.apply(this,arguments)
}
autoTap.prototype=new tap;
autoTap.prototype.constructor=autoTap;

window.onload=function(){
new tap(‘box‘);
new autoTap(‘box2‘)
};
</script>
</head>

<body>
<div id="box" class="box">
<input class="on" type="button" value="aaa">
<input type="button" value="bbb">
<input type="button" value="ccc">
<div style="display:block;">111</div>
<div>222</div>
<div>333</div>
</div>
<div id="box2" class="box">
<input class="on" type="button" value="aaa">
<input type="button" value="bbb">
<input type="button" value="ccc">
<div style="display:block;">111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>

时间: 2024-11-01 22:04:43

选项卡,面向对象的相关文章

选项卡面向对象练习

面向对象的选项卡 原则 :先写出普通的写法,然后改成面向对象写法 . 普通方法变型: 尽量不要出现函数嵌套函数 可以有全局变量 把onload中不是赋值的语句放到单独函数中 改成面向对象: 全局变量就是属性 函数就是方法 Onload中创建对象 改this指向问题 下面是普通代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

简易选项卡面向对象加事件委托方式实现

选项卡,都不陌生,今天把之前的代码翻出来重写了下.不多说了,直接上代码 <script> function Tab(){ this.init.apply(this,arguments); } Tab.prototype = { /* 初始化方法 获取html元素(视图),并绑定事件 */ init:function(){ this.tab = document.getElementById('tab'); this.tabs = tab.getElementsByTagName('li');

JQ选项卡(面向对象)

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta h

面向对象-选项卡

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>面向对象-选项卡</title> 6 <style type="text/css"> 7 * { margin:0; padding:0; } 8 li { list-style: none; } 9 a { text-decoration:no

面向对象选项卡组件

离校实习前端工作一个月,第一次用面向对象写的点击切换选项卡组件,点击左右按钮分别切换不同的选项 基于JQ的一个组件 //创建构造函数function ShowNews(selector){ this.i=0; this.num=$(selector).length;}//添加切换方法ShowNews.prototype.show=function(selector,nextbtn,prevbtn){ var _this=this;//下一张$(nextbtn).click(function(){

面向对象的tab选项卡实现

利用最基础的面向对象的思想,实现tab选项卡效果: 效果截图: HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>面向对象的tab选项卡实现</title> <link rel="stylesheet" href="tab.css"> &l

javascript面向对象系列第四篇——选项卡的实现

前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡.三个控制按钮利用点击事件分别控制三张不同的选项卡.选项卡用文字和背景颜色区分,控制按钮用轮廓outline区分 HTML代码 [1]使用行间样式来引入CSS的扩展性不高,需要根据实际情况谨慎使用 [2]在a标签中使用javascript:;来阻止默认的页面跳转行为 [3]给最外层div元素设置id属

面向对象写选项卡、拖拽

js: 面向对象说白了就是一个黑匣子,所谓黑匣子就是知道具体怎么弄但不了解里面运转流程. 面向对象的组成:属性.方法. 属性其实也就是js里面常用的对象,只不过换了一只叫法. 至于方法则是js里面常用的函数. 唯一两者的区别,属性和方法是被定义的,也就是它们是被束缚的,反之,函数.对象异然. 例子: var a=12; alert(a);               //对象是自由的 var arr=[1,2,3,4]; arr.a=14; alert(arr.a);         //属性被

面向对象的tab选项卡

面向对象 this的问题  用定时器 用了事件的之后 首先我们先布局一下 按照常规的js来做一下选项卡, <style type="text/css"> ul, li{ list-style-type: none; margin: 0; padding: 0} #div1{ width: 300px; height: 30px; background: #ccc} #div1 li{width: 100px; float: left;; text-align: center

js面向对象+一般方法的选项卡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-