jQuery idTabs plugin

有時候會了省版面空間,會使用書籤(Tab)的方式來顯示資訊

雖然網路上有很多相關的套件,但如果趕時間是要拿來當急戰力用,idTabs是個不錯的選擇

HTML:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.sunsean.com/idTabs/jquery.idTabs.min.js"></script>
<div id="test_usual"> 
	<ul> 
		<li><a href="#tab1">Tab 1</a></li> 
		<li><a class="selected" href="#tab2">Tab 2</a></li><!-- 將class名稱設成selected,預設會先顯示#tab2 -->
		<li><a href="#tab3">Tab 3</a></li> 
	</ul> 
	<!-- Content -->
	<div id="tab1">This is tab 1.</div> 
	<div id="tab2">More content in tab 2.</div> 
	<div id="tab3">Tab 3 is always last!</div> 
</div>

jQuery:

$(document).ready(function(){
	$("#test_usual ul").idTabs(); 
});
Categories: jQuery