该插件乃本博客作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。

此插件旨在实现目前较为流行的tab标签页或滑动门特效，在此插件中默认使用的是鼠标滑过事件，您也可以根据自己的实际需求将滑过事件hover改为点击事件click。整体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>tab标签页/滑动门</title>

<style>

*{margin:0;padding:0;font-size:12px;}

li{list-style:none;}

.tabs{margin:20px;width:400px;height:250px;}

.tabs_nav{margin-left:1px;}

.tabs_nav li{float:left;border:1px solid #ddd;border-bottom:none;width:90px;height:25px;line-height:25px;text-align:center;cursor:pointer;margin-left:-1px;}

.tabs_nav li.active{background:#ccc;}

.tabs_content{clear:both;display:none;border:1px solid #ddd;height:200px;padding:10px;}

</style>

<script type="text/javascript" src="../../jquery-1.7.1.js"></script>

</head>

<body>

<div class="tabs">

  <ul class="tabs_nav">

    <li>商品详情</li>

    <li>商品参数</li>

    <li>商品评论</li>

  </ul>

  <div class="tabs_content">这里是商品详情</div>

  <div class="tabs_content">这里是商品参数</div>

  <div class="tabs_content">这里是商品评论</div>

</div>

<script>

/*

* tabs 0.1

* Copyright (c) 2014 tnnyang http://tnnyang.cnblogs.com/

* Dependence jquery-1.7.1.js

*/

;(function($){

    $.fn.tabs = function(options){

        //默认参数

        var defaults = {

            tabsContent:'tabscontent',

            Class:'active',

            Event:'hover'

            };

        var opts = $.extend(defaults,options);

        this.each(function(){

            var obj = $(this);

            var $content = opts.tabsContent, $class = opts.Class, $event = opts.Event;

            obj.find("li").first().addClass($class);

            obj.children($content).first().show();

            obj.find("li").on($event,function(){

                $(this).addClass($class).siblings().removeClass($class);

                var $index = obj.find("li").index(this);

                $(this).parent().siblings(opts.tabsContent).eq($index).show().siblings(opts.tabsContent).hide();

                });

            });

        };

    })(jQuery)

</script>

<script>

$(function(){

    $(".tabs").tabs({

        tabsContent:'.tabs_content',  //设置滑动门的详情

        Class:'active'

        });

    })

</script>

</body>

</html>

原生js实现方法：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    *{margin:0;padding:0;}

    li{list-style:none;}

    #tabs{width:300px;margin:50px;border:1px solid #ddd;}

    #tabs ul{overflow:hidden;margin-bottom:10px;}

    #tabs li{float:left;width:100px;margin-left:33px;height:35px;line-height:35px;text-align:center;border-bottom:2px solid #999;cursor:pointer;}

    #tabs li.active{border-bottom:#f00 2px solid;}

    .tabs_con{margin:0 33px;display:none;}

    .tabs_con.active{display:block;}

</style>

</head>

<body>

    <div id="tabs">

        <ul>

            <li class="active">周排行</li>

            <li>月排行</li>

        </ul>

        <div class="tabs_con active">这里是周排行</div>

        <div class="tabs_con">这里是月排行</div>

    </div>

<script>

    window.onload = function(){

        //标题中的 li

        var lis = document.getElementById("tabs").getElementsByTagName("li");

        //给标题中的所有li 添加事件

        for(var i = 0;i<lis.length;i++){

            lis[i].num = i;   //当前是第几个 li

            lis[i].onclick=function(){

                var k = this.num  //当前的li是第几个

                //内容中的 div块

                var divs = document.getElementsByClassName("tabs_con");

                //把所有的div消失并去掉所有li标签的class

                for(var j = 0;j<divs.length;j++){

                    divs[j].style.display = "none";

                    lis[j].className = "";

                    }

                //显示指定的div并给当前的li标签添加class

                divs[k].style.display = "block";

                this.className = "active";

                };

            };

        };

</script>

</body>

</html>

jquery插件之tab标签页或滑动门的更多相关文章

  1. 如何一行jquery代码写出tab标签页（链式操作）

    啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...

  2. Bootstrap插件——(Tab)标签页

    项目中用到了Bootstrap的(Tab)标签页插件,记录如下: 代码如下: <div class="tabbable"> <ul class="nav ...

  3. 在Bootstrap开发中解决Tab标签页切换图表显示问题

    在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...

  4. Bootstrap入门（二十七）JS插件4：标签页

    Bootstrap入门(二十七)JS插件4:标签页 标签页的切换可以带动内容的变化 首先我们引入CSS文件 <link href="bootstrap.min.css" re ...

  5. Easyui 关闭jquery-easui tab标签页前触发事件

    关闭jquery-easui tab标签页前触发事件 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求场景 点击父页面tab 页关闭按钮时,需要做判断,判 ...

  6. VIM 实现tab标签页及分屏，切换命令

    1,在一个窗口中,VIM 的小tab标签页命令:   :tabnew [++opt选项] ［+cmd］ 文件            建立对指定文件新的tab :tabc       关闭当前的tab ...

  7. ExtJS配置TabPanel可以拖拽Tab标签页

    1.环境说明 ExtJS版本:7.4.0.42 Sencha Cmd: v7.5.1.20 开发工具:WebStorm 2022.1.1 PS:如果是老版本的ExtJS,引入Ext.ux.TabReo ...

  8. [置顶] JQuery实战总结三 标签页效果图实现

    在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...

  9. JQuery实战总结三 标签页效果图实现

    在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...

随机推荐

  1. SQL常用查询语句及函数

    1.日期匹配_获取时间差 select datediff(dd,getdate(),'12/25/2006')  --计算从今天到12/25/2006还有多少个月 2.不能通过IP连接数据库 在数据库 ...

  2. 把VSO作为GitHub上JavaScript项目的免费CI服务器

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:微软变得更加开放后,走向开放的不仅有.NET运行时.IDE工具,还有ALM服务器核心组 ...

  3. Bag-of-words模型

    Bag-of-words模型是信息检索领域常用的文档表示方法.在信息检索中,BOW模型假定对于一个文档,忽略它的单词顺序和语法.句法等要素,将其仅仅看作是若干个词汇的集合,文档中每个单词的出现都是独立 ...

  4. 模板模式与策略模式/template模式与strategy模式/行为型模式

    模板模式 模版模式,又被称为模版方法模式,它可以将工作流程进行封装,并且对外提供了个性化的控制,但主流程外界不能修改,也就是说,模版方法模式中,将工作的主体架构规定好,具体类可以根据自己的需要,各自去 ...

  5. 10 个学习iOS开发的最佳网站（转）

    10 个学习iOS开发的最佳网站 作者 jopen 2012-09-26 08:59:56 1) Apple Learning Objective C Objective-C,通常写作ObjC和较少用 ...

  6. 【项目总结】之——导出Excel

    近来接手的项目,有几个很值得分享的东西.经过自己的不懈实践,总结,分享给大家,希望能对大家的学习有点帮助. 本次探讨的是mvc框架之中的一种导出方法,导出excel. 先让大家看一下啊我们的view界 ...

  7. Loadrunner中动态添加虚拟用户

    添加的虚拟用户会立马开始执行: 场景组的两种模式: Vuser组模式: Vuser组模式中,对于压力负载机是不能同时添加多个 但是我们可以在一个脚本里通过多次添加Vuser,每次添加30个Vuser, ...

  8. Java利用POI导入导出Excel中的数据

         首先谈一下今天发生的一件开心的事,本着一颗android的心我被分配到了PB组,身在曹营心在汉啊!好吧,今天要记录和分享的是Java利用POI导入导出Excel中的数据.下面POI包的下载地 ...

  9. 通过maven下载jar包

    准备 你得先安装Maven如果不会点击后面的连接查看一二步.http://www.cnblogs.com/luoruiyuan/p/5776558.html 1.在任意目录下创建一个文件夹,其下创建一 ...

  10. 反射和动态代理实现上下文切入AOP效果

    Java的反射框架提供了动态代理机制,允许在运行期对目标类生成代理,避免重复开发,实现上下文切入的功能. 代码是最好的交流语言: Subject接口 RealSubject实现接口 SubjectHa ...