jQuery选项卡实例代码
分类:实例代码
选项卡的应用非常的广泛,因为它的优点很多,一个是分类清晰,辨识度强,第二个是能够节省网页空间。
实现选项卡的方式有多种,下面就通过一个实例介绍其中的一种,希望能够给需要的朋友带来一定的帮助。
代码实例如下:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta name="author" content="http://www.pipipi.net/" /> <title>tab选项卡代码实例-前端教程网</title> <style type="text/css"> .order_box .stitle { width:400px; clear:right; height:27px; font-size:12px; border-bottom:2px solid #A10000; } .order_box .stitle .close { width:100px; height:18px; border-top:1px solid #dedede; border-left:1px solid #dedede; border-right:1px solid #dedede; background:#f1f1f1; color:#000; text-align:center; float:left; margin-right:5px; padding-top:8px; } .order_box .stitle .open { width:100px; height:20px; background:#A10000; color:#fff; text-align:center; float:left; margin-right:5px; padding-top:8px; overflow:hidden; } .order_box ul li { cursor:pointer; display:list-item; list-style:none; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(function(){ $(".stitle li").click(function(){ var index_tab=$(this).parent().children().index($(this)); $(this).parent().find(".open").removeClass("open").addClass("close"); $(this).removeClass("close").addClass("open"); var content_obj=$(".cntorder"); content_obj.hide(); content_obj.eq(index_tab).show(); }) }) </script> </head> <body> <div class="order_box"> <div class="stitle"> <ul> <li class="open">div+css专区</li> <li class="close">jQuery专区</li> <li class="close">javascript专区</li> </ul> </div> <div class="cntorder" >前端教程网一</div> <div class="cntorder" style="display:none;">前端教程网二</div> <div class="cntorder" style="display:none;">前端教程网三</div> </div> </body> </html>
以上代码实现了选项卡功能,代码比较简单,这里就不多介绍了,如有问题可以跟帖留言。
相关阅读:
1.click事件可以参阅jQuery click事件一章节。
2.parent()函数可以参阅jQuery parent()一章节。
3.children()函数可以参阅jQuery children()一章节。
4.index()函数可以参阅jQuery index()一章节。
5.find()函数可以参阅jQuery find()一章节。
6.removeClass()函数可以参阅jQuery removeClass()一章节。
7.addClass()函数可以参阅jQuery addClass()一章节。
8.hide()函数可以参阅jQuery hide()一章节。
9.show()函数可以参阅jQuery show()一章节。
jQuery选项卡实例代码,这样的场景在实际项目中还是用的比较多的,关于jQuery选项卡实例代码就介绍到这了。
jQuery选项卡实例代码属于前端实例代码,有关更多实例代码大家可以查看。