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

主要是基于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. [leetcode] 486. Predict the Winner (medium)

    原题 思路: 解法一: 转换比较拿取分数多少的思路,改为考虑 player拿的分数为正,把Player2拿的视为负,加上所有分数,如果最后结果大于0则Player1赢. 思考得出递归表达式: max( ...

  2. 前端手势控制图片插件书写四(图片上传及Ios图片方向问题）

    1.在图片上传中,使用的input的type为File的属性.使用filereader的Api let that = this; var file = document.getElementById( ...

  3. angularjs compine和link的区别

    [译]ng指令中的compile与link函数解析 04 September 2014 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre ...

  4. AIX7.1安装zabbix_agent3.4

    1.在zabbix官网https://www.zabbix.com/download下载Zabbix pre-compiled agents 2.Zabbix pre-compiled agents安 ...

  5. Jenkins持续部署-创建差量更新包

    目录 Jenkins持续部署-创建差量更新包 目录 前言 目的 详细流程 生成版本号 获取版本号 创建文件更新清单 压缩 获取上个版本的包 创建差量更新包 读取服务器Json配置 远程创建文件夹目录 ...

  6. 【数据结构】B树、B+树详解

    B树 前言 首先,为什么要总结B树.B+树的知识呢?最近在学习数据库索引调优相关知识,数据库系统普遍采用B-/+Tree作为索引结构(例如mysql的InnoDB引擎使用的B+树),理解不透彻B树,则 ...

  7. cookbook_模块和包

    1把模块按层次结构组织成包 只需确保每个目录中都定义了__init__.py即可. 2对所有符号的导入进行精确控制 当用户使用from module import * 语句时,我们希望对从模块或包中导 ...

  8. 学习LayUI时自研的表单参数校验框架

    开发背景&痛点:每次写前端的表单的时候需要对表单里用户填写的内容进行校验,减少服务器压力,提前对已知错误对用户提示.每次会要写很多的if else等等对输入框中的内容进行判断,并对为空.格式不 ...

  9. JSP使用分层实现业务处理

    在Java开发中,使用JDBC操作数据库的四个步骤如下:   ①加载数据库驱动程序(Class.forName("数据库驱动类");)   ②连接数据库(Connection co ...

  10. Deque 和Queue

    概述 接口,一个线性结合,支持在集合首尾add , remove , deque 是double  ended queue 的缩写,意味双端队列,接口提供的方法有两种类型,如果失败,一种抛出异常,一种 ...