JS基于面向对象实现的选项卡效果示例

2024-12-03 09:29:33

本文实例讲述了JS基于面向对象实现的选项卡效果。分享给大家供大家参考，具体如下：

中间过渡环节：把面向过程的程序，改写成面向对象的形式

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 input {background:#CCC;}
#div1 .active {background:yellow;}
#div1 div {width:200px; height:200px; background:#CCC; display:none;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
  var oDiv=document.getElementById('div1');
  var aBtn=oDiv.getElementsByTagName('input');
  var aDiv=oDiv.getElementsByTagName('div');
  var i=0;
  for(i=0;i<aBtn.length;i++)
  {
    aBtn[i].index=i;
    aBtn[i].onclick=function ()
    {
      for(i=0;i<aBtn.length;i++)
      {
        aBtn[i].className='';
        aDiv[i].style.display='none';
      }
      this.className='active';
      aDiv[this.index].style.display='block';
    };
  }
};
</script>
</head>
<body>
<div id="div1">
  <input class="active" type="button" value="教育" />
  <input type="button" value="财经" />
  <input type="button" value="aaa" />
  <div style="display:block;">1asdfasdfds</div>
  <div>2xzcvxzcv</div>
  <div>5332342345</div>
</div>
</body>
</html>

改写注意事项:

1.前提:所有代码必须包含在window.onload里面
2.去掉函数嵌套（window.onload里面嵌套的函数拎到window.onload外面去）
3.不能有函数嵌套，但可以有全局变量（比如onclick函数拎出去后，aBtn是window.onload函数里的私有变量，onclick函数不能用）

过程：

1.onload(初始化整个程序)→构造函数(初始化一个对象)
2.全局变量→属性
3.函数→方法

window.onload=function(){
  var oTab=new TabSwitch("div1");
}
function TabSwitch(id)
{
  var oDiv=document.getElementById(id);
  this.aBtn=oDiv.getElementsByTagName('input');
  this.aDiv=oDiv.getElementsByTagName('div');
  var i=0;
  var _this=this;     //this是new出来的对象，即oTab
  for(i=0;i<this.aBtn.length;i++)
  {
    this.aBtn[i].index=i;
    this.aBtn[i].onclick=function(){
      _this.tab(this);  //通过参数的形式，将被点击的按钮传到下面去
    };
  }
};
TabSwitch.prototype.tab=function(oBtn){
  for(i=0;i<this.aBtn.length;i++)
  {
    this.aBtn[i].className='';
    this.aDiv[i].style.display='none';
  }
  oBtn.className='active';  //要被点击的按钮改变，而不是new出来的对象，所以这里不用this
  this.aDiv[oBtn.index].style.display='block';
}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

原生javascript实现Tab选项卡切换功能

分析个人用原生JS获取类名元素的代码: 复制代码代码如下: getByClassName:function(className,parent){ var elem = [], node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
JS+CSS实现的经典tab选项卡效果代码

本文实例讲述了JS+CSS实现的经典tab选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款经典的JavaScript+CSS tab选项卡代码,由以前的一款改写而成,自认为不错的东西,发上来分享吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio
原生js实现tab选项卡切换

本文实例为大家分享了原生js实现tab选项卡切换效果的代码,供大家参考,具体内容如下 1.html部分 <body> <div id="tab"> <div class="tab_menu"> <ul> <li class="selected"><a href="#">时事</a></li> <li><a hre
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果

本文实例讲述了jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果.分享给大家供大家参考.具体如下: 这款网页特效主要是tytabs.jquery.min.js插件的实例演示,一个带有漂亮渐变效果的TAB选项卡,演示了一个网页上设置两个选项卡,都是带有淡入淡出的渐变效果,为了演示效果,里面我随便弄了些文字,用时候自己删除吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tytabs-tab-cha-m
学习javascript面向对象实例讲解面向对象选项卡

本文实例讲解了最简单的面向对象选项卡实现方法,分享给大家供大家参考,具体内容如下效果图: 1.功能说明点击三个按钮分别显示对应的选项卡 2.html代码说明 <div class="box" id="box"> <ul class="list"> <li class="in_active">第一张选项卡</li> <li class="in">
JS实现同一个网页布局滑动门和TAB选项卡实例

本文实例讲述了JS实现同一个网页布局滑动门和TAB选项卡.分享给大家供大家参考.具体如下: 这里演示同一个网页布局滑动门和TAB选项卡效果,其实滑动门和选项卡没有太大的区别,无非是鼠标动作的不同而已,但是有时候在同一个网页中布局两个以上的选项卡,总容易产生混乱,导致JS出错,如果你需要这样做,那么就请参考本实例,帮你解决这个问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-hd-tab-menu-style-codes/ 具体
js简单实现竖向tab选项卡的方法

本文实例讲述了js简单实现竖向tab选项卡的方法.分享给大家供大家参考.具体如下: 选项卡占据左边,而内容放在右边,一个适合新手的竖向的tab选项卡特效例子 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ru"> <head> <title>
js基于面向对象实现网页TAB选项卡菜单效果代码

本文实例讲述了js基于面向对象实现网页TAB选项卡菜单效果代码.分享给大家供大家参考.具体如下: 这是一款自动的网页TAB,基于面向对象的选项卡菜单,由于时间关系只做了简单的实现,界面没有美化,不多做介绍了. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mxdx-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio
js实现类似菜单风格的TAB选项卡效果代码

本文实例讲述了js实现类似菜单风格的TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的一组简洁选项卡代码,类似菜单风格的TAB选项卡,没有使用图片,因此有些地方处理的还不太到位,不介意使用图片修饰的朋友可以再次美化这上选项卡,风格有点类似于菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-menu-style-tab-nav-codes/ 具体代码如下: <html xmlns="ht
JS基于面向对象实现的多个倒计时器功能示例

本文实例讲述了JS基于面向对象实现的多个倒计时器功能.分享给大家供大家参考,具体如下: 运行效果图如下: 实现代码如下: 代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l
JS实现不规则TAB选项卡效果代码

本文实例讲述了JS实现不规则TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款不规则TAB选项卡效果,将中规中矩的方角换成了不规则的圆角,也就是这一换,倒让浏览者新鲜了不少,也使选项卡增多了几份灵感,不是吗? 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-box-tab-nav-style-menu-codes/ 具体代码如下: <html> <head> <meta http-equiv="C
JS使用面向对象技术实现的tab选项卡效果示例

本文实例讲述了JS使用面向对象技术实现的tab选项卡效果.分享给大家供大家参考,具体如下: 运行效果图如下: 代码如下: html: <ul class="scrollUl"> <li id="m01" class="sd01" value="0"><a href="#" rel="external nofollow" rel="external

JS基于面向对象实现的选项卡效果示例

相关推荐

随机推荐