您的位置：首页 > 其它

史上最简单的JQ选项卡

2016-07-11 13:01 399 查看

//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:le
4000
ft;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,

df60
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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航