Simple JQuery Plugin Tab/简易的jq tab插件

最新推荐文章于 2024-09-15 23:59:26 发布
最新推荐文章于 2024-09-15 23:59:26 发布
阅读量76 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5a11adf3f265da432717d235
版权

###html:Simple JQuery Plugin Tab

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Simple JQuery Plugin Tab</title>
    <!--IMPORT init resetCSS-->
    <link rel="stylesheet" href="css/reset.min.css">
    <link rel="stylesheet" href="css/tab.css">
</head>
<body>
<div class="tabBox">
    <ul class="tab clearfix">
        <li>新闻</li>
        <li>电影</li>
        <li>动漫</li>
    </ul>
    <div class="con">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <div class="con">
        <ul>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </div>
    <div class="con">
        <ul>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
        </ul>
    </div>
</div>

<div class="tabBox">
    <ul class="tab clearfix">
        <li>新闻</li>
        <li>电影</li>
        <li>动漫</li>
    </ul>
    <div class="con">
        1
    </div>
    <div class="con">
        2
    </div>
    <div class="con">
        3
    </div>
</div>

<div class="tabBox">
    <ul class="tab clearfix">
        <li>新闻</li>
        <li>电影</li>
        <li>动漫</li>
        <li>科技</li>
    </ul>
    <div class="con">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <div class="con">
        <ul>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </div>
    <div class="con">
        <ul>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
        </ul>
    </div>
    <div class="con">
        <ul>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
        </ul>
    </div>
</div>

<!--IMPORT jquery-1.11.3.min.js-->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/tab.js"></script>
<script>
    //
    $('.tabBox').each(function (index) {
        if (index === 0) {
            $(this).pluginTab({
                eventType: 'mouseover'
            });
        }

        if (index === 1) {
            $(this).pluginTab({
                initIndex: 1
            });
        }

        if (index === 2) {
            $(this).pluginTab({
                initIndex: 2,
                eventType: 'mouseover'
            });
        }
    });
</script>
</body>
</html>复制代码

###css :tab.css

.tabBox {
    margin: 20px auto;
    width: 500px;
    font-size: 14px;
}

.tabBox .tab {
    position: relative;
    top: 1px;
}

.tabBox .tab li {
    float: left;
    margin-right: 15px;
    padding: 0 15px;
    height: 35px;
    line-height: 35px;
    border: 1px solid #999;
    background: #EEE;
    cursor: pointer;
}

.tabBox .tab li.select {
    background: #FFF;
    border-bottom-color: #FFF;
}

.tabBox .con {
    display: none;
    padding: 10px;
    height: 150px;
    border: 1px solid #999;
}

.tabBox .con li {
    line-height: 29px;
    border-bottom: 1px dashed #CCC;
}

.tabBox .con.select {
    display: block;
}复制代码

####Javascript

/*//扩展jq原型方法 | Extend  JQ prototype method
 * 1)设置默认参数 | Set default paramete
 * 2)获取操作元素 | Get the dom element
 * 3)定义方法 | Define the mothod
 * 4)用户改变默认参数 | User setting parameters
 * 5)显示默认元素 |Whether the user sets the parameters
 * 6)绑定事件 | bindEevnt
 *
 * */
(function ($) {
    var pluginTab = function pluginTab(options) {
        //1:Set default paramete
        var _default = {
            index: 0,
            eventType: 'click'
        }

        //2:Get the dom element
        var tagBox = this, tabList = tagBox.find('.tab>li'), tabContainer = tagBox.children('.con');

        //3:Define the mothod
        var change = function change(index) {
            tabList.eq(index).addClass('select').siblings().removeClass('select');
            tabContainer.eq(index).addClass('select').siblings().removeClass('select');
        }

        //4: Whether the user sets the parameters
        options && $.each(options, function (key, value) {
            if (options.hasOwnProperty(key)) {
                _default[key] = value;

            }
        })

        //5)Show default element
        change(_default.index);

        //6: bindEevnt
        tabList.on(_default.eventType, function () {
            var $index = $(this).index();
            change($index);
        });
    }
    $.fn.extend({
        pluginTab: pluginTab
    })
})(jQuery)复制代码

Default parameter

{
index: 0,//默认显示内容
eventType: 'click'//默认事件类型
}

weixin_34293902
关注
simpleTab - jQuery Plugin
07-01
Create an easy-to-config simple tab with smallest code base. http://geniuscarrier.com/simpletab-a-jquery-plugin/
制作高质量的JQuery Plugin 插件的方法
10-29
这时，编写JQuery插件就显得尤为重要。本文将介绍如何制作高质量的JQuery插件，以便实现个性化定制和功能拓展。 首先，了解什么是JQuery插件是关键。简单来说，JQuery插件就是一个遵循特定设计模式的JavaScript函数...
chrome-plugin-tab:用于自定义新标签页的Chrome插件
05-18
chrome-plugin-tab 用于自定义新标签页的Chrome插件。 安装 通过chrome浏览器打开chrome://extensions/ 。 将NiceTab.crx拖到浏览器中，然后单击“是”进行安装。 如果您看到下面显示的图标，则表明安装成功。 ...
jQuery倒计时/计时器/时间插件
11-29
3. **时间插件（Time Plugin）**：这是jQuery的一个扩展，用于增强对时间操作的功能，包括格式化、解析和显示时间。 实现这些功能，我们主要依赖jQuery的`setInterval()`和`clearInterval()`方法，以及JavaScript的...
jQuery多媒体插件jQuery Media Plugin使用详解
10-25
### jQuery多媒体插件jQuery Media Plugin使用详解知识点 jQuery Media Plugin是一款基于jQuery框架开发的多媒体播放器插件，它支持多种多媒体格式的嵌入，使得在网页上嵌入多媒体内容变得简单且兼容性良好。以下是...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 883
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
weixin_45980065的博客
09-14 630
【代码】【JavaScript】LeetCode：707设计链表。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 482
实现中国地图各省数据案例
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 526
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
JS笔记
2201_76100326的博客
09-11 903
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
vue3中动态引入本地图片的两种方法
haodanzj的博客
09-11 291
动态在本地引入图片
JS的输出语句
J3259392566的博客
09-13 272
js中严格区分大小写。
八十多种证件识别接口-JavaScript身份证识别API示例-护照识别-户口页识别
weixin_41711744的博客
09-12 631
证件识别API包含了身份证识别、护照识别、户口页识别、港澳台来往通行证识别等八十多种证件识别类型，提供了快速、精准的证件信息提取功能，广泛应用于实名认证 、机场出入口等场景。身份证识别API常用于在线支付、金融服务、酒店入住等需要进行实名认证和提取身份信息的场景。在这些场景中，通过快速识别和验证身份证信息，可以有效提高处理速度，减少人为错误，增强安全性。八十多种证件识别接口提供了一种高效、精准的识别方式来读取各类证件信息，通过合理应用这些技术，可以大幅提升用户体验和企业运营效率。
《实现 HTML 图片轮播效果》
qq_69304031的博客
09-11 811
在网页设计中，轮播效果是非常常见且重要的元素。它可以在有限的空间内展示多张图片或者广告，能够有效地吸引用户的注意力，提高信息展示的效率。常用于网站首页的焦点图展示、商品图片展示等场景。以下是一个简单的 HTML、CSS 和 JavaScript 实现的图片轮播代码示例。
echarts饼图内容循环播放实现
qq_39877681的博客
09-12 308
echarts饼图内容循环播放实现
计算机毕业设计 基于SpringBoot的课程教学平台的设计与实现 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
weixin_19164791635
09-12 912
本文介绍了一款基于Java、SpringBoot和Vue.js技术的课程教学平台。该平台服务于管理员、学生和教师，提供教学资源管理、课程信息浏览、作业提交与批改等功能，旨在优化教学流程，提升教育质量，促进教育资源的数字化共享，推动教育信息化发展。
华为的仓颉和ArkTS这两门语言有什么区别
最新发布
qq_31860647的博客
09-15 455
在运行时实例内存隔离的基础上，ArkCompiler通过共享运行实例中的不可变或者不易变的对象、内建代码块、方法字节码等技术手段，优化了并发运行实例的启动性能和内存开销。了解TypeScript的朋友都应该知道，其实TypeScript就是JavaScript的改进版本，是JS的超级，现在又出了个ArkTS，说是TS的超集。ArkTS的官网介绍说，ArkTS是TypeScript的进一步强化版本，简单来说就是包含了TS的风格，但是做了一些改进。而且，还说了是原生智能化，天生原场景，仔细关注这句话【
服装|基于Java+vue的服装定制系统(源码+数据库+文档)
weixin_66413741的博客
09-10 729
服装定制将是广大用户们不可忽视的一块。但是管理好服装定制又面临很多麻烦需要解决,我们可以发现服装定制方面的系统并不是相当普及,在服装定制方面的可以有许多改进。即服装定制系统慢慢的被人们关注。服装定制管理方面的任务繁琐,以至于每年都在服装定制管理这方面投入较多的精力却效果甚微,
一文读懂 JS 中的 Set 结构
沐爸的博客
09-11 1003
Set 如何使用？和 Map 有什么区别？有哪些属性和方法？又有哪些使用场景？WeakMap 又是什么？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值