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

主要是基于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. C#编程之自动实现的属性

    在 C# 3.0 及更高版本,当属性访问器中不需要任何其他逻辑时,自动实现的属性会使属性声明更加简洁.它们还允许客户端代码创建对象.当你声明以下示例中所示的属性时,编译器将创建仅可以通过该属性的 ge ...

  2. 在windows中使用 nvm 实现node多版本管理

    所谓 NVM 就是 Node Version Manager 的缩写,即 node的版本管理工具,我们可以在电脑中安装多个不同版本的node,并借由 NVM 来实现自由切换,详情可点击查看 NVM 官 ...

  3. 深挖Openstack Nova - Scheduler调度策略

    深挖Openstack Nova - Scheduler调度策略   一.  Scheduler的作用就是在创建实例(instance)时,为实例选择出合适的主机(host).这个过程分两步:过滤(F ...

  4. Maven重新下载未下载完成的jar包

    使用maven下载jar包,经常会遇到下载失败的情况,如果失败的jar包过多,或是不清楚到底有那些jar包在下载过程中出现了问题.可通过maven命令重新批量下载未成功的jar包. 1,打开cmd , ...

  5. 15款好用超赞的chrome插件， 开发者们的必备~

    今天推荐一波Chrome插件干货.这些插件带给我开发效率上的提升.所以在这里整理一下,分享给朋友们. 作为一名程序开发者,推荐一波常用的chrome插件,用了就舍不得丢,包括免费FQ工具,github ...

  6. thinkphp 插件

    1.切换到项目根目录,使用composer require 5ini99/think-addons:dev-master命令安装thinkphp插件 如果是root用户或是管理员执行的话会有提示 等一 ...

  7. 日常用shell命令

    递归更改文件夹权限:chmod -R 767 文件名 mac启动apache sudo apachectl start/restart mac停止apache sudo apachectl stop ...

  8. 洛谷P1003 题解

    题面 思路一:纯模拟.(暴力不是满分) 思路: 1.定义一个二维数组. 2.根据每个数据给二维数组赋值. 3.最后输出那个坐标的值. 思路二(正规思路): 逆序找,因为后来的地毯会覆盖之前的,一发现有 ...

  9. Linux内容点（部分）

    文件属性 -w      文件或目录,对目前(有效的)用户或组来说是可写的       -x       文件或目录,对目前(有效的)用户或组来说是可执行的       -o       文件或目录, ...

  10. nginx 301跳转https后post请求失效问题解决

    app本地请求是http端口,后来升级https强制301跳转,设置如下 server { listen 80; server name www.XXX.com; rewrite ^/(.*)$ ht ...