JS代码

(function (w) {

    //tab对象

    function Tab(config) {

        //定义变量，防止变量污染

        this.tabMenus=null;

        this.tabMains=null;

        if(config){

            this._init(config);

        }

    }

    //为原型添加属性，防止内存重复创建

    Tab.prototype={

        _init:function (config) {

            //初始化元素

            this.initElements(config);

            this.initEvent();

            if(config.auto){

                this.autoPlay();

            }

        },

        initElements:function (config) {

            var tabMenu=document.getElementById(config.tabMenu);

            var tabMain=document.getElementById(config.tabMain);

            this.tabMenus=tabMenu.children;

            this.tabMains=tabMain.children;

        },

        initEvent:function () {

            for(var i=;i<this.tabMenus.length;i++){

                var li=this.tabMenus[i];

                li.index=i;

                //定义this变量存储，闭包环境可以调用此变量

                var that=this;

                li.onclick=function () {

                    that.change(this);

                }

            }

        },

        change:function (tabMenu) {

            for(var i=;i<this.tabMenus.length;i++){

                this.tabMenus[i].className="";

                this.tabMains[i].className="main";

            }

            tabMenu.className="active";

            this.tabMains[tabMenu.index].className+=" select";

        },

        autoPlay:function () {

            var index=;

            var that=this;

            setInterval(function () {

                index++;

                if(index>=that.tabMenus.length){

                    index=;

                }

                that.change(that.tabMenus[index]);

            },);

        }

    }

    //将插件暴露给windows

    w.Tab=Tab;

})(window)

HTML代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="tab.css">

</head>

<body>

    <div class="wrapper">

        <ul class="tab" id="menu">

            <li class="active">国际大牌<span>◆</span></li>

            <li>国妆名牌<span>◆</span></li>

            <li>清洁用品<span>◆</span></li>

            <li>男士精品</li>

        </ul>

        <div class="products" id="main">

            <div class="main select"><a href="#"><img src="imgs/guojidapai.jpg"></a></div>

            <div class="main"><a href="#"><img src="imgs/guozhuangmingpin.jpg"></a></div>

            <div class="main"><a href="#"><img src="imgs/qingjieyongpin.jpg"></a></div>

            <div class="main"><a href="#"><img src="imgs/nanshijingpin.jpg"></a></div>

        </div>

    </div>

</body>

<script type="text/javascript" src="tab.js"></script>

<script>

    var tb=new Tab({

        tabMenu:"menu",

        tabMain:"main",

        auto:true

    });

</script>

</html>

css代码

 html,body,ul,li {

     margin: ;

     padding: ;

 }

 ul{

     list-style: none;

 }

 .wrapper {

     margin:  auto;

     width: 1000px;

     height: 475px;

     margin-top: 100px;

 }

 .wrapper .tab {

     width: 320px;

     height: 36px;

     border: 1px solid #ddd;

     border-bottom: ;

 }

 .wrapper .tab li{

     float:left;

     width: 80px;

     height: 34px;

     line-height: 34px;

     cursor: pointer;

     text-align: center;

     border-top: 4px solid #fff;

     position: relative;

 }

 .wrapper .tab .active{

     border-top: 4px solid red;

 }

 .wrapper .tab span{

     width: 1px;

     height: 14px;

     background-color: #ddd;

     position: absolute;

     right:0px;

     top:10px;

     overflow: hidden;

 }

 .wrapper .products{

     width: 1002px;

     height: 476px;

     border:1px solid #ddd;

 }

 .wrapper .products .main{

     float: left;

     display: none;

 }

 .wrapper .products .select{

     display: block;

 }

js插件编程-tab框的更多相关文章

  1. Bootstrap的js插件之警告框(alert.js)

    data-dismiss="alert"--为关闭button加入该属性能够使其自己主动为警告框赋予关闭功能. .fade .in--为警告框在关闭时加入动画效果. 很多其它细节參 ...

  2. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  3. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-1导入JavaScript插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

  4. js控制Bootstrap 模态框（Modal）插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  5. Bootstrap入门（三十）JS插件7：警告框

    Bootstrap入门(三十)JS插件7:警告框 通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...

  6. Bootstrap入门（二十九）JS插件6：弹出框

    Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...

  7. Bootstrap入门（二十三）JS插件1：模态框

    Bootstrap入门(二十三)JS插件1:模态框 1.静态实例 2.动态实例 3.模态框的尺寸和效果 4.包含表单的模态框 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能 ...

  8. Highchar.js插件提示框千分位显示为空格而不是逗号 --（2018 08/06-08/12周总结）

    1.Oracle在已经存在主键的表中插入复合主键的SQL语句 如已有一个表test_key,其中a1列为主键. CREATE TABLE TEST_KEY( A1 VARCHAR2(3) NOT NU ...

  9. [Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面

    引言 查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框 在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...

随机推荐

  1. 专题2-通过按键玩中断\第1课-中断处理流程深度剖析-lesson1

    中断概念 1.中断生命周期 串口先产生一个事件,该事件传送到中断控制器里面,中断控制器会进行相应过滤,能通过过滤,那么就交给CPU去处理. 2.中断源 2440芯片手册 6410芯片手册 3.中断过滤 ...

  2. 第04章-面向切面的Spring

    1. 什么是面向切面编程 AOP是什么 切面帮助我们模块化横切关注点. 横切关注点可被描述为影响应用[多处的]功能.如安全,应用许多方法会涉及安全规则. 继承与委托是最常见的实现重用 通用功能 的面向 ...

  3. （转）用事实说话，成熟的ORM性能不是瓶颈，灵活性不是问题：EF5.0、PDF.NET5.0、Dapper原理分析与测试手记

    原文地址:http://www.cnblogs.com/bluedoctor/p/3378683.html [本文篇幅较长,可以通过目录查看您感兴趣的内容,或者下载格式良好的PDF版本文件查看] 目录 ...

  4. vmware10中arch使用遇到的一些问题

    xfce4中安装中文输入法fcitx step 1  #pacman -S fcitx-im setp 2 在~/.xinitrc中添加如下内容: export LC_ALL=zh_CN.UTF-8e ...

  5. element时间选择器插件转化为YYYY-MM-DD的形式

    let datete = new Date(this.form.value0);this.form.value0 =datete.getFullYear() +"-" +(date ...

  6. 《Servlet和jsp学习指南》 笔记2

    chapter 13 请求和响应的装饰 初步了解Decorator模式: 在不修改一个对象的类的源码的情况下,装饰这个对象的行为. chapter 14 异步处理 异步Servlet和Filter,只 ...

  7. 【arc074e】RGB Sequence dp

    Description ​ 丰泽爷今天也在愉快地玩Minecraft! ​ 现在丰泽爷有一块1∗N1∗N的空地,每个格子按照顺序标记为11到NN.丰泽爷想要在这块空地上铺上红石块.绿宝石块和钻石块作为 ...

  8. Kafka,Mq,Redis作为消息队列有何差异？

    Kafka作为新一代的消息系统,mq是比较成熟消息系统,而redis也可以发布订阅,那么这三者有何异同? RabbitMQ 是使用Erlang编写的一个开源的消息队列,本身支持很多的协议:AMQP,X ...

  9. Tensorflow的认识

    1.基本概念(Tensorflow) 使用图(graphs)来表示计算任务 n 在被称之为会话(Session)的上下文(context)中执行图 n 使用tensor表示数据 n 通过变量(Vari ...

  10. 一道组合数问题--出自 曹钦翔_wc2012组合计数与动态规划

    一道组合数问题--出自 曹钦翔_wc2012组合计数与动态规划 [问题描述] 众所周知,xyc 是一个宇宙大犇,他最近在给他的学弟学妹们出模拟赛. 由于 xyc 实在是太巨了,他出了一套自认为很水的毒 ...