选项卡内容名目免费素材下载 SimpleTab

SimpleTab ，正在一个页面中规划两个相反的工具，一个是滑动门，另外一个则是各人相熟的选项卡，有时分咱们很难正在同页面中让滑动门以及选项卡同正在，其实这是咱们还没有相熟Js的特性，心愿经过这个例子，学会其办法，并且本例子中的滑动门做的相称美丽。

代码也值患上参考下，喜爱的冤家能够学习下。

<div id="container-1"><!--应用时： var s=new UI_TAB();s.init("container-1");-->
	<ul class="ui-tabs-nav">
		<li class="ui-tabs-selected"><a href="#fragment-1"><span>One</span></a></li>
		<li class=""><a href="#fragment-2"><span>Two</span></a></li>
		<li class=""><a href="#fragment-3"><span>Three</span></a></li>
	</ul>
	<!--下面的导航名目全放正在class为的UL上面的LI下,高亮局部顺次是默许显示的名目，显示内容的id，选项卡的题目-->
	<div style="display: block;" class="ui-tabs-panel ui-tabs-hide" id="fragment-1">
		<p>First tab</p>
	</div>
	<!--下面的构造就是内容的构造，高亮局部顺次是默许显示的内容，每个内容都要有的class，和以及选项卡对应的ID-->
	<div class="ui-tabs-panel ui-tabs-hide" id="fragment-2">
		<p>Second tab</p>
	</div>
	<div class="ui-tabs-panel ui-tabs-hide" id="fragment-3">
		<p>Third tab</p>
	</div>
</div>