Wu Yudong's Blog

刚刚使用jquery实现了一个简单的tab切换，算是对jquery有了进一步的认识，当然真正的jquery博大精深，以后只能从项目中慢慢的摸索学习了。

html代码如下：

<ol class="is-title-ol is-t-tab-ol" id="tab">
	<li class="current"><a title="最新" name="new" href="javascript:void(0)" >最新</a>
	</li>
	<li><a title="热门" name="hot" href="javascript:void(0)">热门</a>
	</li>
	<li><a title="等待回复" name="reply" href="javascript:void(0)" >等待回复</a>
	</li>
</ol>

对应需要显示的div如下：

<div>
	<section class="isAct-list" id="SL-container">
		<div id="new"></div>
		<div id="hot" style="display: none;">hot</div>
		<div id="reply" style="display: none;">reply</div>
	</section>
</div>

相应的js代码如下：

$(function() {
	$("#tab li a").click(function() {
	    $(this).parent('li').addClass('current').siblings('li').removeClass('current');  
	    $("#new,#hot,#reply").hide();
	    $("#"+$(this).attr('name')).show();
	 });
})