选项卡样式如图，请忽略丑陋的样式，样式可以随意更改

主要是基于jquery的extend扩展出的一个简单的选项卡插件，注意：这里封装的类使用的是es6中的class，所以不兼容ie8等低版本浏览器呦！想要兼容低版本可以参考思路，然后换成原生的构造函数原型继承方式

以下是 tabs.js 文件：

class Tabs{

    constructor(that){

        this.that=that;

        this.opt={//默认参数,不传走默认

            eventN:'click',

            btns:['新闻','娱乐','游戏'],

            contents:['新闻1','娱乐1','游戏1']

        }

    }

    init(opt){

        //是否用默认参数

        $.extend(this.opt,opt);//匹配传递进来的配置参数，有就覆盖，没有就用默认的

        //创建按钮

        this.creatButton();

        //创建切换内容

        this.creatContents();

        //添加功能

        this.events(this.opt.eventN);

    }

    creatButton(){

        let html=``;

        this.opt.btns.forEach((e,i)=>{

            html+=`<button class="${i===0?'action':''}">${e}</button>`;

        });

      this.that.append(html);

    }

    creatContents(){

        let html=``;

        this.opt.contents.forEach((e,i)=>{

            html+=`<div class="${i===0?'show':''}">${e}</div>`;

        });

        this.that.append(html);

    }

    events(evName){

        let buts=this.that.find('button'),

            contents=this.that.find('div');

            buts.on(evName,function () {

               buts.removeClass('action');

               contents.removeClass('show');

               $(this).addClass('action');

               let inx=$(this).index('button');

               contents.eq(inx).addClass('show');

           });

    }

}

$.fn.extend({

    tabs:function (opt) {

        let t=new Tabs(this);//this是jq对象

        t.init(opt);

    }

})

调用方式：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue</title>

    <style>

        #app{

            width: 210px;

            height: 100px;

        }

        #app button{

            width: 70px;

            height: 44px;

            line-height: 44px;

            background: yellow;

            border:0;

            cursor: pointer;

        }

        #app button.action{

            background: darkorange;

        }

        #app div{

            display: none;

            width: 210px;

            background: slateblue;

        }

        #app div.show{

            display: block;

        }

    </style>

</head>

<body>

<section id="app">

</section>

<script src="./jquery.js"></script>

<script src="./tabs.js"></script>

<script>

    $('#app').tabs({

        eventN:'mouseover',//默认click

        btns:['新闻1','娱乐2','游戏1'],

        contents:['新闻内容','娱乐内容','游戏内容']

    });

</script>

</body>

</html>

赋值代码，效果就可以呈现！

使用jQuery.extend创建一个简单的选项卡插件的更多相关文章

  1. 利用HTML5与jQuery技术创建一个简单的自动表单完成

    来源:GBin1.com 在线演示   在线下载 谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项.然而今天我要寻找一个替代的解决方案.由DevBridge开发的j ...

  2. Windows 8.1 应用再出发 (WinJS) - 创建一个简单项目

    前面几篇我们介绍了如何利用 C# + XAML 完成Windows Store App 功能的实现,接下来的几篇我们来看看如何利用 Html + WinJS 来完成这些功能. 本篇我们使用WinJS ...

  3. Highcharts创建一个简单的柱状图

    新建一个html文件,将highcharts引入到你的页面后,通过两个步骤我们就可以创建一个简单的图表了. 1.创建div容器 在页面的 body部分创建一个div,并指定div 的 id,高度和宽度 ...

  4. SharePoint创建一个简单的Visio Web部件图

    SharePoint创建一个简单的Visio Web部件图 Visio有很多强大的Mash-up混聚功能,使它能够轻松集成到SharePoint 2010中. 1. 打开Visio 2010,创建新的 ...

  5. 如何创建一个简单的Visual Studio Code扩展

    注:本文提到的代码示例下载地址>How to create a simple extension for VS Code VS Code 是微软推出的一款轻量级的代码编辑器,免费,开源,支持多种 ...

  6. 《Entity Framework 6 Recipes》翻译系列 (3) -----第二章 实体数据建模基础之创建一个简单的模型

    第二章 实体数据建模基础 很有可能,你才开始探索实体框架,你可能会问“我们怎么开始?”,如果你真是这样的话,那么本章就是一个很好的开始.如果不是,你已经建模,并在实体分裂和继承方面感觉良好,那么你可以 ...

  7. 如何创建一个简单的C++同步锁框架(译)

    翻译自codeproject上面的一篇文章,题目是:如何创建一个简单的c++同步锁框架 目录 介绍 背景 临界区 & 互斥 & 信号 临界区 互斥 信号 更多信息 建立锁框架的目的 B ...

  8. ADF_General JSF系列1_创建一个简单的JSF Application

    2015-02-17 Creatd By BaoXinjian

  9. IntelliJ IDEA 15 部署Tomcat及创建一个简单的Web工程

    一.部署Tomcat 二.创建一个简单的Web工程 2.1创建一个新工程 创建一个新工程 设置JDK及选择Web Application (创建的是Web工程) 点击Next,选择工作空间,起个工程名 ...

随机推荐

  1. MySQL图形工具SQLyog破解版

    最近一直在用MySQL,所以分享一下现在这套开发工具. SQLyog:链接:http://pan.baidu.com/s/1bLq2OA 密码:h5bj 注册信息用户名:yunjian注册码:81f4 ...

  2. mySQL相关函数的使用

    获取执行SQL指令被影响的记录数或字段数 ·mysqlo_num_rows()函数:适用于执行SELECT语句,可以返回被筛选出来的记录数. 其语法如下,参数result为资源标识符 mysqlo_n ...

  3. 小白学python-day05（2）-列表及其操作

    今天是day05(2),以下是学习总结 但行努力,莫问前程. --------------------------------------------------------------------- ...

  4. HTML--表格与表单（练习做注册页面）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. linux基础命令期末考试总结

    1.关闭防火墙:service iptables stop 2.启动防火墙:service iptables start 3.mount命令:挂载某一设备使之成为某个目录名称 4.NFS服务:linu ...

  6. myeclipse中更改默认jdk版本出错（ Target is not a JDK root. System library was not found）

    原因是我的本地jdk版本是9.0,将jdk版本更改至8.0即可导入成功. jdk9.0导入myeclipse中去会有此类问题的发生,因此没有必要使用最新的jdk版本.

  7. JavaScript的面向对象原理之原型链

    二.JavaScript的对象 为了能够清楚的解释这一切,我先从对象讲起.从其他面向对象语言(如Java)而来的人可能认为在JS里的对象也是由类来实例化出来的,并且是由属性和方法组成的. 实际上在JS ...

  8. 第二章、Go-基础语法

    2.1.变量定义 (1)第一个程序helloworld package main import( "fmt" ) func main() { fmt.Println("h ...

  9. mysql 查询结果显示行号

    mysql 查询时,不像oracle那样,可以直接用 rownum 显示结果行号. 可以用定义用户变量来实现 set @myrnum = 0; select (@myrnum := @myrnum + ...

  10. 【Java例题】5.3 字符统计

    3.分别统计一个字符串中大写字母.小写字母.数字. 汉字以及其它字符的个数. package chapter5; import java.util.Scanner; public class demo ...