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

主要是基于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. Python -----函数（基础部分）

    函数: 1.定义: 函数是对功能的封装 2.语法: def 函数名 函数体 函数名 函数名的命名规则和变量一样 3.函数的返回值: return,函数执行完毕,不会执行后面的 1.如果函数中不写ret ...

  2. Linux下gcc编译器的使用

    例:gcc -x -g c helloC -o firstC -x:改变gcc的行为.(注:如果是.c文件则不用加-x) -x c :编译c程序 -x c++ :编译c++程序 -x java :编译 ...

  3. 重复造轮子系列——基于Ocelot实现类似支付宝接口模式的网关

    重复造轮子系列——基于Ocelot实现类似支付宝接口模式的网关 引言 重复造轮子系列是自己平时的一些总结.有的轮子依赖社区提供的轮子为基础,这里把使用过程的一些觉得有意思的做个分享.有些思路或者方法在 ...

  4. 0728 history

    -- :: cd /etc/yum.repos.d/ -- :: wget http://download.virtualbox.org/virtualbox/rpm/rhel/virtualbox. ...

  5. HTTP_2_HTTP协议概要

    http协议概要 HTTP 通信对象 通信方式 通信状态 定位资源 节省通信量 超文本传输协议 客户端与服务器端 请求和响应 不保存状态(借助cookie) 请求URI keep-alive/pipe ...

  6. bean的创建（五）第一部分

    AbstractBeanFactory.doGetBean protected <T> T doGetBean( final String name, final Class<T&g ...

  7. GDB 基本用法

    1.编译文件时需要加上 -g 选项,并非是将源码嵌入可执行文件,只是加入源代码的信息.eg:gcc -g main.c -o main 2.直接按回车键会重复上一条命令 3.基本指令 help,可以查 ...

  8. 记kepServer读写西门子PLC

    在程序开发过程中为了测试方法或者验证某个属性的值是否正确 经常通过Kepserver 的 OPC Quick Client来手动置点或者读取点位 例如 这里显示的值都是经过转化后得到的十进制值,那我们 ...

  9. 再记一次经典Net程序的逆向过程

    1.前言 上次发完,有网友问了一个问题:如果不绕过编译,而是直接编译怎么办? 记一次Net软件逆向的过程:https://www.cnblogs.com/dotnetcrazy/p/10142315. ...

  10. abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十二)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...