飞龙分离式选项卡jQuery版通用精简版
(686) feilong.org 修订于2025-06-23 12:27:48 js教程分离式选项卡： 选项卡的标题和正文不在一起。缺点：语义不足。优点，不需定位，内容可以自适应高度。这是通用的tab选项卡做法。
飞龙分离式选项卡jQuery版通用精简版。可以多次运用，一次jQuery代码，多处实例灵活运用。
本日志修订网址：http://feilong.org/jquery-gap-tabs-ul
一、tab选项卡css样式，包括基础样式[gaptabs basic css ] 和实例样式[gaptabs application sample1 css]。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/* 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选项卡功能运用和扩展
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
三、实例一：自适应tab标题宽度。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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> |
ok
更新网址：https://feilong.org/jquery-gap-tabs-ul
最初发布：20170313 07:41:16 feilong.org 于广州
加入收藏夹，查看更方便。