工学1号馆

home

jquery实现tab切换

Wu Yudong    July 14, 2019     HTML5+CSS3   7,978   

刚刚使用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();
	 });
})

 

如果文章对您有帮助,欢迎点击下方按钮打赏作者

Comments

No comments yet.
To verify that you are human, please fill in "七"(required)