史上最简单的JQ选项卡

最新推荐文章于 2022-11-14 15:31:33 发布

xyphf_和派孔明

最新推荐文章于 2022-11-14 15:31:33 发布

阅读量4.4k

点赞数

分类专栏： DOM&BOM操作

本文链接：https://blog.csdn.net/xyphf/article/details/51879938

版权

DOM&BOM操作专栏收录该内容

64 篇文章 0 订阅

订阅专栏

//CSS部分
<style>
*{padding:0;margin:0;list-style:none;}
.tab {width:300px;height:300px;background:red;margin:0 auto;}
.tab ol{float:left;width:300px;height:50px;background:blue;}
.tab ol li{float:left;width:100px;height:50px;background:green;text-align:center;line-height:50px;}
.tab ol li.active{background:yellow;}

.tab ul{float:left;width:300px;height:250px;}
.tab ul li{float:left;width:300px;height:250px;background:#ddd;display:none;text-align:center;line-height:200px;font-size:40px;}
.tab ul li.cur{display:block;}
</style>
//HTML部分
<body>
    <div id="tab" class="tab">
        <ol>
            <li class="active">热点</li>
            <li>时政</li>
            <li>财经</li>
        </ol>
        <ul>
            <li class="cur">热点</li>
            <li>时政</li>
            <li>财经</li>
        </ul>
    </div>
</body>
//JS部分
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
//简易选项卡
<script>
$(function(){
    $("#tab ol li").click(function(){
        now=$(this).index();
        tab();
    });
    function tab(){
        $("#tab ol li").eq(now).addClass('active').siblings().removeClass('active');
        $("#tab ul li").eq(now).addClass('cur').siblings().removeClass('cur');
    }
})
</script>

自动选项卡

<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
    var timer = null;
    var now = 0;
    $("#tab ol li").click(function(){
        now=$(this).index();
        tab();
    });
    function next(){
        now++;
        now%=$("#tab ol li").length;
        tab();  
    }
    function tab(){
        $("#tab ol li").eq(now).addClass('active').siblings().removeClass('active');
        $("#tab ul li").eq(now).addClass('cur').siblings().removeClass('cur');
    }
    var timer=setInterval(next,1000);   
    $('#tab').hover(function(){
        clearInterval(timer);   
    },function(){
        timer=setInterval(next,1000);   
    });
})
</script>

简单的选项卡插件

///HTML部分
<body>
<div id="tab"></div>
</body>

//CSS部分
<style>
*{margin:0;padding:0;list-style:none;}
#tab {width:300px;height:300px;margin:0 auto;}
#tab ol{width:300px;height:30px;}
#tab ol li{float: left;width:92px;height:30px;text-align:center;background:green;border:1px solid #ccc;line-height:30px;color:#fff;}
#tab ol li.active{background:red;}
#tab ul{width:280px;height:270px;}
#tab ul li{float: left;width:280px;height:270px;border:1px solid #000;text-align:center;line-height:270px;display:none;}
#tab ul li.cur{display:block;}
</style>
//JS部分
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
//插件体
<script>
(function($){
    var defaults = {//默认信息
        heads : ['1','2','3'],//默认卡头文字
        bodys : ['11111','22222','33333'],//默认div内容
        events:'click',//默认事件
        Hw:50,//默认卡头的宽
        Hh:30,//默认卡头的高
        Hbtrr:0,//默认卡头右上角圆角度数
        Hbtlr:0,//默认卡头左上角圆角度数
        Hbblr:0,//默认卡头右下角圆角度数
        Hbblr:0,//默认卡头左下角圆角度数

        dw:280,//默认卡身宽度你
        dh:270,//默认卡身高度
        dbtrr:0,//默认卡身右上角圆角度数
        dbtlr:0,//默认卡身左上角圆角度数
        dbbrr:0,//默认卡身右下角圆角度数
        dbblr:0//默认卡身左下角圆角度数
    };
    var settings = {}//设置信息
    var $parent = null; //设置父级元素
    function fnTab(options){//options配置信息形参
        $parent = this;
        settings = $.extend(settings,defaults,options);//设置,默认,配置 有配置走配置,没配置走默认
        create(settings.Hw,settings.Hh,settings.Hbtrr,settings.Hbtlr,settings.Hbbrr,settings.Hbblr,
            settings.dw,settings.dh,settings.dbtrr,settings.dbtlr,settings.dbbrr,settings.dbblr
        );//调用创建函数
        bind();
    }

    function create(Hw,Hh,Hbtrr,Hbtlr,Hbbrr,Hbblr,dw,dh,dbtrr,dbtlr,dbbrr,dbblr){//创建
        var $Ol = $('<ol></ol>');
        var $Ul = $('<ul></ul>');
        for (var i = 0; i < settings.heads.length; i++) {
            var $head = $('<li>'+settings.heads[i]+'</li>');
            $head.css({
                width: Hw,
                height:Hh,
                borderTopRightRadius:Hbtrr,
                borderTopLeftRadius:Hbtlr,
                borderBottomRightRadius:Hbbrr,
                borderBottomLeftRadius:Hbblr
            });
            if (i==0) {
                $head.attr('class','active');
            }
            $Ol.append($head);
            $parent.append($Ol);
        }

        for(var i=0;i<settings.bodys.length;i++){
            var $div = $('<li>'+settings.bodys[i]+'</li>');
            $div.css({
                width: dw,
                height:dh,
                borderTopRightRadius:dbtrr,
                borderTopLeftRadius:dbtlr,
                borderBottomRightRadius:dbbrr,
                borderBottomLeftRadius:dbblr
            });
            if (i==0) {
                $div.attr('class','cur');
            }
            $Ul.append($div);
            $parent.append($Ul);
        }
    }

    function bind(){//添加操作行为
        $parent.find('ol li').on(settings.events,function(){
            $parent.find('ol li').attr('class','');
            $(this).attr('class','active');
            $parent.find('ul li').attr('class','');
            $parent.find('ul li').eq($(this).index()).attr('class','cur');
        });
    }

    $.fn.extend({//提供外部接口
        tabs : fnTab
    });
})(jQuery);
</script>

//插件调用方法
<script>
$(function(){
    $('#tab').tabs({
        heads:['体育','娱乐','新闻'],//设置卡头
        bodys:['体育11111','娱乐121212','新闻fffff'],//设置卡体
        events:'mouseover',//设置事件
        Hw:50,//设置卡头的宽 可以不设置,默认为50px
        Hh:30,//设置卡头的高 可以不设置,默认为30xp
        Hbtrr:0,//设置卡头右上角圆角度数 可以不设置,默认为 0
        Hbtlr:0,//设置卡头左上角圆角度数 可以不设置,默认为 0
        Hbblr:0,//设置卡头右下角圆角度数 可以不设置,默认为 0
        Hbblr:0,//设置卡头左下角圆角度数 可以不设置,默认为 0

        dw:280,//设置卡身宽度 可以不设置,默认为 280
        dh:270,//设置卡身高度 可以不设置,默认为 270
        dbtrr:0,//设置卡身右上角圆角度数 可以不设置,默认为 0
        dbtlr:0,//设置卡身左上角圆角度数 可以不设置,默认为 0
        dbbrr:0,//设置卡身右下角圆角度数 可以不设置,默认为 0
        dbblr:0//设置卡身左下角圆角度数 可以不设置,默认为 0
    });
});
</script>