jQuery简单实现tab选项卡切换效果

抽空把公司项目上用的tab效果封装了一下，实在是需要用的地方太多了~~~
效果图：

http://files.jb51.net/file_images/article/201606/201606201125406.jpg

代码：

<！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效果</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指向调用函数的IDpanels = 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指向liif （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>

以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持脚本之家。