用于多个元素的jQuery选项卡式元素

Posted 2021-02-24

A clean and simple jQuery function for creating a tabbed element. This one allows multiple tabbed elements on 1 page (which has been the downfall of so many others)

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>