飞龙分离式选项卡jQuery版通用精简版 = 飞龙博客

飞龙分离式选项卡jQuery版通用精简版

feilong.org 修订于2025-06-23 12:27:48 572 次浏览

分离式选项卡：选项卡的标题和正文不在一起。缺点：语义不足。优点，不需定位，内容可以自适应高度。这是通用的tab选项卡做法。
飞龙分离式选项卡jQuery版通用精简版。可以多次运用，一次jQuery代码，多处实例灵活运用。

本日志修订网址：http://feilong.org/jquery-gap-tabs-ul

一、tab选项卡css样式，包括基础样式[gaptabs basic css ] 和实例样式[gaptabs application sample1 css]。

/* gaptabs basic css */
ul,li,ol{margin:0;padding:0;list-style-type:none;}
.gaptabs{}
.gaptabs .tabtits{}
.gaptabs .tabtits li{float:left;}
.gaptabs .tabtits li a{}
.gaptabs .tabtits li a span{}
.gaptabs .tabtits li.nowtit{}
.gaptabs .tabcont{clear:both;display:none;}
.gaptabs .nowcont{display:block;}

/* gaptabs application sample1 css */
#bangdan{background:#fff; margin:6px;}
#bangdan .tabtits{display:block;background:#fff; }
#bangdan .tabtits li{ display:block;height:24px; line-height:24px; margin:0 5px; padding:0 5px; background:#eee; text-align:center;}
#bangdan .tabtits li a{ text-decoration:none; letter-spacing:2px;}
#bangdan .tabtits li a span{color:#333;}

#bangdan .tabtits li.nowtit{ background:#EE2605;}
#bangdan .tabtits li.nowtit a span{color:#fff;}

#bangdan .tabcont{min-height:500px; border-top:3px solid #EE2605; padding:5px;}
#bangdan .nowcont{background:#fff;}

/* gaptabs basic css */

ul,li,ol{margin:0;padding:0;list-style-type:none;}

.gaptabs{}

.gaptabs .tabtits{}

.gaptabs .tabtits li{float:left;}

.gaptabs .tabtits li a{}

.gaptabs .tabtits li a span{}

.gaptabs .tabtits li.nowtit{}

.gaptabs .tabcont{clear:both;display:none;}

.gaptabs .nowcont{display:block;}

/* gaptabs application sample1 css */

#bangdan{background:#fff; margin:6px;}

#bangdan .tabtits{display:block;background:#fff; }

#bangdan .tabtits li{ display:block;height:24px; line-height:24px; margin:0 5px; padding:0 5px; background:#eee; text-align:center;}

#bangdan .tabtits li a{ text-decoration:none; letter-spacing:2px;}

#bangdan .tabtits li a span{color:#333;}

#bangdan .tabtits li.nowtit{ background:#EE2605;}

#bangdan .tabtits li.nowtit a span{color:#fff;}

#bangdan .tabcont{min-height:500px; border-top:3px solid #EE2605; padding:5px;}

#bangdan .nowcont{background:#fff;}

二、jQuery调用和jQuery的tab选项卡功能运用和扩展

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){//0
$(".gaptabs").each(function(i){//1
var thistabs=".gaptabs:eq("+i+")";
$(thistabs+">.tabtits>li").each(function(j){//2 //var inthis=$(this).html(); alert(inthis);//alert(j);
if(j==0){$(this).addClass("nowtit");$(thistabs+" .tabcont:eq("+j+")").addClass("nowcont")}

$(this).mouseover(function(){//mouseover can be replaced by click alert(j);
$(this).addClass("nowtit").siblings("li").removeClass("nowtit");//alert($(this).attr("class"));
$(thistabs+">.tabcont:eq("+j+")").addClass("nowcont").siblings().removeClass("nowcont");
});

});//2
});//1
})//0
</script>

$(function(){//0

$(".gaptabs").each(function(i){//1

var thistabs=".gaptabs:eq("+i+")";

$(thistabs+">.tabtits>li").each(function(j){//2 //var inthis=$(this).html(); alert(inthis);//alert(j);

if(j==0){$(this).addClass("nowtit");$(thistabs+" .tabcont:eq("+j+")").addClass("nowcont")}

$(this).mouseover(function(){//mouseover can be replaced by click alert(j);

$(this).addClass("nowtit").siblings("li").removeClass("nowtit");//alert($(this).attr("class"));

$(thistabs+">.tabcont:eq("+j+")").addClass("nowcont").siblings().removeClass("nowcont");

});

});//2

});//1

})//0

</script>

三、实例一：自适应tab标题宽度。

<div class="gaptabs" id="bangdan">

<ul class="tabtits">
<li><a href="javascript:void(0)"><span>原创金曲榜</span></a></li>
<li><a href="javascript:void(0)"><span>翻唱</span></a></li>
</ul>

<div class="tabcont">
11111 feilong
</div>

<div class="tabcont">
2222 feilong
</div>

<!--bangdan --></div>

<li><a href="javascript:void(0)"><span>原创金曲榜</span></a></li>

</ul>

11111 feilong

</div>

2222 feilong

</div>

</div>

更新网址：https://feilong.org/jquery-gap-tabs-ul
最初发布：20170313 07:41:16 feilong.org 于广州

加入收藏夹，查看更方便。

所在分类： js 教程

新作：飞龙前端测试：委托式 js全选反选代码 20170504 版