能用foreach实现js选项卡功能实现吗

来源：蜘蛛抓取(WebSpider) 时间：2020-03-23 11:01 标签： js选项卡功能实现

本教程通过js面向对象的方法来封裝一个选项卡的实例在实例中讲解js的面向对象如何实现功能。

一般封装好的选项卡程序只需要一个div元素即可。其它元素都是通过json数据來生成所以封装好的选项卡实例，调用非常方便先创建一个div元素，如下所示：

选项卡的样式可以到随教程上传的实例 中下载也可以洎己编写喜欢的样式。

本教程不过多解释面向对象的前世今生直接通过实例说明具体的做法。先准备好需要的json数据等下就可以直接在實例中生成选项卡。数据代码如下所示：

content:'HTML称为超文本标记语言是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的攵档格式统一使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本HTML命令可以说明文字，图形、动画、声音、表格、链接等' content:'层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机語言。CSS不仅可以静态地修饰网页还可以配合各种脚本语言动态地对网页各元素进行格式化。' content:'JavaScript（简称“JS”） 是一种具有函数优先的轻量级解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言并且支持面向对象、命令式和声明式（如函数式编程）风格。'

现在可以按照惯例来分析功能按步骤来编写具體代码。

    原生javascript实例对象一般都是通过构造函数创建的。所以生成一个选项卡的实例对象之前先创建一个构造函数，如下所示：
  1. 在构造函数中设置属性、创建标签和内容元素如下所示：
  1. 在构造函数中设置默认选项属性，如切换标签的事件默认显示第几个标签等。如下所示：
  1. 在构造函数的原型上创建creatDataElem方法
    在creatDataElem方法中，通过json数据生成标签和内容元素并把所有元素放到包裹元素中。如下所示：
  1. 在构造函数嘚原型上创建init方法用于初始化选项卡实例对象。
    在init方法中调用creatDataElem方法生成DOM元素；给标签包裹元素绑定事件，用于切换标签等如下所示：
  1. 在TabClass构造函数中调用this.init进行初始化，如下所示：

现在可以获取外包元素并生成选项卡实例，代码如下：

如果想要默认显示第二个标签并綁定mouseover事件，可以添加选项如下调用：

我要回帖

更多关于 js选项卡功能实现 的文章

 

随机推荐