關于選項卡、tab切換等特效素材，361源碼的網站素材頻道中的選項卡/滑動門中有很多實例，方便了很多草根站長，雖然效果很多，實例不少，但是有不少朋友在群里老是咨詢一些基本原理和方法，實現的辦法。tab切換效果一般的CSS3和jQuery都可以實現，今天361源碼就給大家分享1個款jQuery實現簡單的tab選項卡切換效果實例介紹，先看下效果圖：
實現代碼也比較容易，全部代碼如下：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.2/jquery.min.js"></script><title>簡單的tab效果-361源碼</title><style type="text/css">* { padding: 0px; margin:0px}body { text-align: center}.wrap ul { overflow: hidden}.wrap li { float: left; list-style: none; margin-right: 10px; cursor: pointer; padding: 2px 5px}.link { cursor: pointer; color: #F00}.wrap { width: 200px; margin: 50px auto}.wrap, .ellipsis { font-size: 12px; width: 200px;}.tab_div div { display: none; padding: 10px;}.tab_div { text-align: left; border: 1px #CCC solid; height: 200px; clear: both}.cur { background: #060; color: #FFF}#setTab_2{ margin-top: 20px;}</style><script type="text/javascript">$(document).ready(function() { //tab $("#setTab").setTab(); $("#setTab_2").setTab();}); /*插件代碼*/(function ($) { $.fn.setTab = function () { var getTab=$(this),//this指向調用函數的ID panels = getTab.children("div.tab_div").children("div"), tabs = getTab.find("li"); return this.each(function(){ $(tabs).click(function(e) { var index = $.inArray(this, $(this).parent().find("li"));//this指向li if (panels.eq(index)[0]) { $(tabs).removeClass("cur"); $(this).addClass("cur"); panels.css("display", "none").eq(index).css("display", "block"); } }); }); }})(jQuery); </script></head><body class="wrap"><div id="setTab"> <ul class="tab_nav"> <li class="cur">國事</li> <li>軍情</li> <li>圖片</li> </ul> <div class="tab_div"> <div style="display: block">國事</div> <div>軍情</div> <div>圖片</div> </div></div><div id="setTab_2"> <ul class="tab_nav"> <li>國事</li> <li class="cur">軍情</li> <li>圖片</li> </ul> <div class="tab_div"> <div>國事</div> <div style="display: block">軍情</div> <div>圖片</div> </div></div></body></html>上面代碼里包含3個基本部分，第一：jQuery庫的引入；第二、樣式代碼的書寫；第三、網頁實現代碼。
這個簡單的jQuery實現tab選項卡切換效果實例就介紹到這里，如果你有需要制作的效果自己不會做的可以聯系我們的在線客服。
以上就是jQuery實現簡單的tab選項卡切換效果實例介紹的全部內容，希望對大家的學習和解決疑問有所幫助，也希望大家多多支持武林網。新聞熱點
疑難解答
圖片精選
