一个页面可多处重复使用的简单tab标签jQuery代码
2019-08-07 10:19:03 / 舒彬琪 / 251 浏览
一个页面可多处重复使用的简单tab标签jQuery代码
js代码如下:
JavaScript
function tabs(tabTit,on,tabCon){ $(tabTit).children().click(function(){ $(this).addClass(on).siblings().removeClass(on); var index = $(tabTit).children().index(this); $(tabCon).children().eq(index).show().siblings().hide(); }); };tabs(".tab-hd","active",".tab-bd");
html代码结构如下:
Markup
<div class="box"> <ul class="tab-hd"><li class="active">标签1</li><li>标签2</li><li>标签3</li></ul> <dl class="tab-bd"> <dd class="thisclass">内容1</dd> <dd>内容2</dd> <dd>内容3</dd> </dl> </div>
此代码可以在一个页面里面多处使用,给每个box里面加上私有class属性即可定义不同的tab风格了。
黑 的留言
TAB切换很实用啊,一个页面多个tab不用找代码了
Windows 10 Chrome 2019-08-07 18:07:09
管理员回复:
是啊,收藏上就爱了
2019-08-11 03:07:36