使用jQuery实现选项卡代码,JS代码库,德仔网

代码语言

代码分类

【JS】使用jQuery实现选项卡

作者:沉淀岁月 / 发布于2013/9/13/ 426


	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);
	 $(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());
	
	
	<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>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　选项卡　

同语言下

可能有用的

沉淀岁月贡献的其它代码(39)