jQuery实现tab选项卡效果小demo
2024-09-04 02:32:55
html页面:
<section>
<h2>Section Title</h2>
<ul class="tab-nav">
<li><a href="#tab1" title="">Tab 1</a></li>
<li><a href="#tab2" title="">Tab 2</a></li>
</ul>
<div class="tab-contents">
<div id="tab1" class="tab-content"><!-- Tab 1 content here --></div>
<div id="tab2" class="tab-content"><!-- Tab 2 content here --></div>
</div>
</section>
js:
var tabs = {
init: function(){
var $tab_contents=$('.tab-contents'), $tab_nav=$('.tab-nav');
$tab_contents.find('.tab-content:not(:first)').hide();
$tab_nav.find('li:first').addClass('active');
$tab_nav.on('click', 'li a', function(e){
e.preventDefault();
var $this=$(this),activeTab=this.hash,parent=$this.parents('section'),$contents=$(parent,$tab_contents);
//this.hash 获取锚链接<a href="#tab1"></a>
$(parent,$tab_nav).find('li').removeClass('active');
$this.parent().addClass('active');
$contents.find('.tab-content').hide();
$contents.find(activeTab).fadeIn(250);
});
}
};
$(document).ready(tabs.init());
最新文章
- C# 合并及拆分PDF文件
- C语言中的system函数参数及其作用
- 利用set排序数组并且去掉重复的数组元素
- Hdu 4681 2013 Multi-University Training Contest 8 String
- 前端面试-----JavaScript题
- DBCC DROPCLEANBUFFERS失效了?
- 普通浏览器GET请求与Ajax的GET请求的区别
- AVPlayer的基本使用
- HTML招聘简历解析
- 用sp_addlinkedserver建立链接服务器(sql server2008中通过测试)
- Redis学习手册(持久化)
- (五)backbone - DEMO - 通信录改造之使用requirejs
- INI文件格式
- sh_脚本语法
- hushset的实现原理
- 一个web应用的诞生--数据表单
- ”在活动中穿梭”已经重做为“Intent的使用”
- redis数据类型-列表类型
- Jmeter-----【mac电脑】配置web浏览器的代理抓取请求
- C++ operator(重载操作符) 【转】