飞龙博客

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

飞龙修订于 20170313 07:41 41 次浏览

分离式选项卡： 选项卡的标题和正文不在一起。缺点：语义不足。优点，不需定位，内容可以自适应高度。这是通用的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;}

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

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

原创金曲榜
翻唱



11111 feilong



2222 feilong

网址：https://feilong.org/jquery-gap-tabs-ul
初发：20170313 07:41

想学前端？长按二维码加我微信

想学前端？点击飞龙QQ

分类： 前端开发

新作：notepad++查找替换窗体透明度设置禁用启用

旧文：UE策划 UI设计 FE前端开发 BE后端开发 合作流程工艺标准草案