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-Type" content="text/html; charset=gb2312" />
<title>js面向对象+一般方法的选项卡</title>
<style type="text/css">
* { padding:0px; margin:0px; }
#tab,#tab2{ width:450px; margin:20px auto; font-size:12px; height:245px;}
.tab_inner { list-style:none; border:1px solid #000; overflow:hidden; background:#000000; color:#FFFFFF; border-top-left-radius:5px; border-top-right-radius:5px; height:30px}
.tab_inner li{ width:80px; height:30px; text-align:center; line-height:30px; float:left; cursor:pointer; }
.tab_inner .hover{ background:#999; color:#000000;}
.content_{ border-bottom:1px #000000 solid; border-right:1px #000000 solid; border-left:1px #000000 solid; border-bottom-right-radius:5px; border-bottom-left-radius:5px; box-shadow:3px 3px 8px #666666; width:448px; }
.content_ .summary{ display:none; clear:both }
.content_ .summary ul { padding-left: 30px; list-style-type:armenian line-height:25px;}
</style>
</head> <body>
<div id="tab2">
<ul class="tab_inner">
<li class="hover">栏目一</li>
<li>栏目二</li>
<li>栏目三</li>
<li>栏目四</li>
</ul>
<div class="content_">
<div class="summary" style="display:block;">
<ul>
<li>网页特效原理分析</li>
<li>响应用户操作</li>
<li>提示框效果</li>
<li>事件驱动</li>
<li>元素属性操作</li>
<li>动手编写第一个JS特效</li>
<li>引入函数</li>
<li>网页换肤效果</li>
<li>展开/收缩播放列表效果</li>
</ul>
</div>
<div class="summary">
<ul>
<li>改变网页背景颜色</li>
<li>函数传参</li>
<li>高重用性函数的编写</li>
<li>126邮箱全选效果</li>
<li>循环及遍历操作</li>
<li>调试器的简单使用</li>
<li>典型循环的构成</li>
<li>for循环配合if判断</li>
<li>className的使用</li>
<li>innerHTML的使用</li>
<li>戛纳印象效果</li>
<li>数组</li>
<li>字符串连接</li>
</ul>
</div>
<div class="summary">
<ul>
<li>JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源</li>
<li>JavaScript出现的位置、优缺点</li>
<li>变量、类型、typeof、数据类型转换、变量作用域</li>
<li>闭包：什么是闭包、简单应用、闭包缺点</li>
<li>运算符：算术、赋值、关系、逻辑、其他运算符</li>
<li>程序流程控制：判断、循环、跳出</li>
<li>命名规范：命名规范及必要性、匈牙利命名法</li>
<li>函数详解：函数构成、调用、事件、传参数、可变参、返回值</li>
<li>定时器的使用：setInterval、setTimeout</li>
<li>定时器应用：站长站导航效果</li>
<li>定时器应用：自动播放的选项卡</li>
<li>定时器应用：数码时钟</li>
<li>程序调试方法</li>
</ul>
</div>
<div class="summary">
<ul>
<li>over...</li>
</ul>
</div>
</div>
</div>
<div id="tab">
<ul class="tab_inner">
<li class="hover">栏目一</li>
<li>栏目二</li>
<li>栏目三</li>
<li>栏目四</li>
</ul>
<div class="content_">
<div class="summary" style="display:block;">
<ul>
<li>网页特效原理分析</li>
<li>响应用户操作</li>
<li>提示框效果</li>
<li>事件驱动</li>
<li>元素属性操作</li>
<li>动手编写第一个JS特效</li>
<li>引入函数</li>
<li>网页换肤效果</li>
<li>展开/收缩播放列表效果</li>
</ul>
</div>
<div class="summary">
<ul>
<li>改变网页背景颜色</li>
<li>函数传参</li>
<li>高重用性函数的编写</li>
<li>126邮箱全选效果</li>
<li>循环及遍历操作</li>
<li>调试器的简单使用</li>
<li>典型循环的构成</li>
<li>for循环配合if判断</li>
<li>className的使用</li>
<li>innerHTML的使用</li>
<li>戛纳印象效果</li>
<li>数组</li>
<li>字符串连接</li>
</ul>
</div>
<div class="summary">
<ul>
<li>JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源</li>
<li>JavaScript出现的位置、优缺点</li>
<li>变量、类型、typeof、数据类型转换、变量作用域</li>
<li>闭包：什么是闭包、简单应用、闭包缺点</li>
<li>运算符：算术、赋值、关系、逻辑、其他运算符</li>
<li>程序流程控制：判断、循环、跳出</li>
<li>命名规范：命名规范及必要性、匈牙利命名法</li>
<li>函数详解：函数构成、调用、事件、传参数、可变参、返回值</li>
<li>定时器的使用：setInterval、setTimeout</li>
<li>定时器应用：站长站导航效果</li>
<li>定时器应用：自动播放的选项卡</li>
<li>定时器应用：数码时钟</li>
<li>程序调试方法</li>
</ul>
</div>
<div class="summary">
<ul>
<li>over...</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
//面向对象版本选项卡
function Tab(obj,type){
this.tab=document.getElementById(obj);
this.tab_inner=this.getByClass("tab_inner",obj)[0];
this.tab_li=this.tab_inner.getElementsByTagName("li");
this.content_=this.getByClass("content_",obj)[0];
this.summary=this.getByClass("summary",this.content_);
var that=this;
for (var i=0;i<this.tab_li.length;i++){
this.tab_li[i].index=i;
Tab.prototype.addHandler(this.tab_li[i],type,function(){that.switch(this.index);});
}
}
Tab.prototype.getByClass=function(className,parents){
parents=parents||document;
if(parents.getElementsByClassName){
return parents.getElementsByClassName(className);
}
var nodes=document.getElementsByTagName("*");
ret=[];
for (var i=0;i<nodes.length;i++){
if(hasClass(nodes[i],className)){
ret.push(nodes[i]);
}
}
return ret;
}
Tab.prototype.hasClass=function(node,className){
var names=node.className.split(/\st/);
for(var i=0;i<names.lemgth;i++){
if(names[i]==className){
return true;
}
}
return false;
}
Tab.prototype.addHandler=function(obj,type,fn){
if (obj.attachEvent)
{
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else{
obj.addEventListener( type, fn, false );
}
}
Tab.prototype.switch=function(n){
for (var i=0;i<this.tab_li.length;i++){
this.tab_li[i].className="";
this.summary[i].style.display="none";
}
this.tab_li[n].className="hover";
this.summary[n].style.display="block";
}
</script>
<script type="text/javascript">
window.onload=function(){
var tab=document.getElementById("tab")
new Tab(tab,"mouseover");
var tab2=document.getElementById("tab2")
new Tab(tab2,"click");
}
</script>
<!--script type="text/javascript">
//一般做法版本的选项卡
window.onload=function(){
var tab=document.getElementById("tab");
var tab_inner=getByClass("tab_inner",tab)[0];
var tab_li=tab_inner.getElementsByTagName("li");
var content_=getByClass("content_",tab)[0];
var summary=getByClass("summary",content_);
function getByClass(className,parents){ //用className获取元素
parents=parents||document;
if(parents.getElementsByClassName){
return parents.getElementsByClassName(className);
}
var nodes=document.getElementsByTagName("*");
ret=[];
for (var i=0;i<nodes.length;i++){
if(hasClass(nodes[i],className)){
ret.push(nodes[i]);
}
}
return ret;
}
function hasClass(node,className){
var names=node.className.split(/\st/);
for(var i=0;i<names.lemgth;i++){
if(names[i]==className){
return true;
}
}
return false;
}
for (var i=0;i<tab_li.length;i++){ //效果实现
tab_li[i].index=i;
tab_li[i].onmouseover=function(){
for (i=0;i<tab_li.length;i++){
tab_li[i].className="";
summary[i].style.display="none";
}
this.className="hover";
summary[this.index].style.display="block";
}
}
}
</script-->
</body>
</html>
js面向对象+一般方法的选项卡的更多相关文章
- 原生js使用面向对象的方法开发选项卡实例教程
本教程通过js面向对象的方法来封装一个选项卡的实例,在实例中讲解js的面向对象如何实现功能. 一般封装好的选项卡程序,只需要一个div元素即可.其它元素都是通过json数据来生成,所以封装好的选项卡实 ...
- JS面向对象（3） -- Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
- js面向过程改写成面向对象--通用方法
响亮的标题:一个万能的,保底的.面向过程改写成面向对象的方法 前提朗读:很多刚接触js面向对象的时候都不知道如何能快速的写出一个面向对象的程序,这个是必然的现象,不是每一位学js的一上来就会写面向对象 ...
- js面向对象之公有、私有、静态属性和方法详解
现下,javascript大行其道,对于网站开发人员来说,javascript是必需掌据的一门语言,但随着jquery等框架的流行和使用,许多人对于原生javascript缺乏深入的理解,习惯了函数式 ...
- js面向对象自定义MyString()的构造器函数，实现内建String()属性和方法：
js面向对象自定义MyString()的构造器函数,实现内建String()属性和方法: var s = new MyString('hello'); s.length; s[0]; // " ...
- JS面向对象编程，对象，属性，方法。
document.write('<script type="text/javascript" src="http://api.map.baidu.com/api?v ...
- js面向对象初步探究（上） js面向对象的5种写方法
非常长一段时间看网上大神的JS代码特别吃力.那种面向对象的写法方式让人看得云里来雾里去.于是就研究了一下JS面向对象.因为是初学,就将自己在网上找到的资料整理一下,作为记忆. js面向对象的5种写方法 ...
- js面向对象 多种创建对象方法小结
转自js面向对象 多种创建对象方法小结 1.对象字面量 var clock={ hour:12, minute:10, second:10, showTime:function(){ alert(th ...
- JavaScript---正则使用,日期Date的使用,Math的使用,JS面向对象(工厂模式,元模型创建对象,Object添加方法)
JavaScript---正则使用,日期Date的使用,Math的使用,JS面向对象(工厂模式,元模型创建对象,Object添加方法) 一丶正则的用法 创建正则对象: 方式一: var reg=new ...
随机推荐
- File类基本操作之OutputStream字节输出流
贴代码了,已经測试,可正常编译 package org.mark.streamRW; import java.io.File; import java.io.FileOutputStream; imp ...
- OpenCV2学习笔记（十四）：基于OpenCV卡通图片处理
得知OpenCV有一段时间.除了研究的各种算法的内容.除了从备用,据导游书籍和资料,尝试结合链接的图像处理算法和日常生活,第一桌面上(随着摄像头)完成了一系列的视频流处理功能.开发平台Qt5.3.2+ ...
- Codeforces Round #107 (Div. 2)---A. Soft Drinking
Soft Drinking time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...
- 【白注意】Windows XP 大胆拥抱Linux在系统中所遇到的问题
Windows XP至4月8日本将不再是微软官方技术支持.虽然仍可以继续使用,但他们大部分的风险.可一不留神被黑客攻击.似向下,Linux这也是一个不错的选择. 或许很多文章开始教你如何迁移,您,迁移 ...
- ER模型
一.什么是ER模型 实体-联系图(Entity-RelationDiagram)用来建立数据模型,在数据库系统概论中属于概念设计阶段,形成一个独立于机器.独立于DBMS的ER图模型.通常将它简称为ER ...
- ThreadLocal可能引起的内存泄露(转)
threadlocal里面使用了一个存在弱引用的map,当释放掉threadlocal的强引用以后,map里面的value却没有被回收.而这块value永远不会被访问到了. 所以存在着内存泄露. 最好 ...
- HDU 1505 Largest Rectangle in a Histogram && HDU 1506 City Game（动态规划）
1506意甲冠军:给你一个连续的直方图(拼贴底部长度1).求连续基质区. 对每一个直方图,分别向左向右进行扩展. #include<cstdio> #include<stdlib.h ...
- The Swift Programming Language中国完整版
近来的ios的swift语言似乎火了.我没有objectc基金会,但在此之前有c随着java在...的基础上.从几天开始学习ios的swift语言,晚发表在博客形式.下面是英文版本翻译swif图书.还 ...
- jQuery.reveal弹出层使用
最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说了算. 这个插件是基于Jquery实现 ...
- 每天收获一点点------Hadoop之HDFS基础入门
一.HDFS出现的背景 随着社会的进步,需要处理数据量越来越多,在一个操作系统管辖的范围存不下了,那么就分配到更多的操作系统管理的磁盘中,但是却不方便管理和维护—>因此,迫切需要一种系统来管理多 ...