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

主要是基于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. bean的创建（五）第二部分 寻找bean的工厂方法实例化

    instanceWrapper = createBeanInstance(beanName, mbd, args); AbstractAutowireCapableBeanFactory.create ...

  2. 1.4.2python网站地图爬虫（每天一更）

    # -*- coding: utf-8 -*- ''' Created on 2019年5月6日 @author: 薛卫卫 ''' import urllib.request import re de ...

  3. nested exception is java.io.FileNotFoundException: class path resource [applicationContext.xml] cannot be opened because it does not exist

    org.apache.ibatis.exceptions.PersistenceException: ### Error building SqlSession. ### The error may ...

  4. Shell基本语法---shell介绍

    简介 1. shell是在linux系统上高效运行的脚本语言 2. 主要用来开发一些实用的.自动化的小工具,而不是用来开发具有复杂业务逻辑的中大型软件 3. shell的基本命令也是linux操作系统 ...

  5. 通过mark和reset方法重复利用InputStream

    InputStreammarkreset 在这篇博客中我们已经简单的知道可以通过缓存InputStream来重复利用一个InputStream,但是这种方式的缺点也是明显的,就是要缓存一整个Input ...

  6. .net持续集成单元测试篇之单元测试简介以及在visual studio中配置Nunit使用环境

    系列目录 单元测试及测试驱动开发简介 什么是单元测试 单元测试是一段自动化的代码,这段代码调用被测试的工作单元,之后对这个单元的单个最终结果的某些假设进行检验.单元测试几乎都是用单元测试框架编写的.单 ...

  7. [重磅开源] 比SingleR更适合的websocket 即时通讯组件---ImCore开源了

    有感而发 为什么说 SignalR 不合适做 IM? IM 的特点必定是长连接,轮训的功能用不上. 因为它是双工通讯的设计,用hub.invoke发送命令给服务端处理业务,其他就和 ajax 差不多, ...

  8. 内容汇总（c语言）

    一,内容 常量(整型,浮点型,字符型,字符串型,符号常量) 变量(基本类型:整形,浮点型,字符型,枚举型:构造类型:数组,结构体,共用体:另外还有指针类型和NULL) 顺序结构 分支结构 循环结构 当 ...

  9. 在表格中添加text便加框

    private void createTableText(Table table) { TableEditor editor = new TableEditor(table); for (int i ...

  10. DesignPattern系列__05开闭原则

    介绍 开闭原则是编程设计中最基本.最重要的原则. 定义:一个软件实体如类.方法和模块等,应该对扩展(提供方)开放,对修改(使用方)关闭.用抽象构建框架,用实现扩展细节. 也就是说,在需求发生新的变化时 ...