之前使用选项卡切换，喜欢用各种小插件，也许是因为封装的比较好，但也有不少前端不喜欢插件，喜欢自己写原始JS，或者使用jquery写选项卡切换功能！
今天就不分享选项卡切换的插件了，就分享个如上图的jquery选项卡切换简单特效：
<!DOCTYPEhtml><html><head><metacharset="utf8"><title>如何利用jQuery製作頁籤-基礎範例</title><style>*{margin:0;padding:0;}body{font:30014px"HelveticaNeue-Light","HelveticaNeueLight","HelveticaNeue",Helvetica,Arial,"LucidaGrande",sans-serif;width:500px;margin:50pxauto;background:#eee;color:#333;line-height:1.5;}a{color:#258fb8;text-decoration:none;}a:hover{text-decoration:underline;}#tabsli{background:#ddd;border:1pxsolid#ccc;border-bottom:none;display:inline-block;margin-right:5px;padding:5px10px;color:#999;cursor:pointer;}#tabsli:hover{color:#666;}#tabsli.enable{border-bottom:1pxsolid#ddd;margin-bottom:-1px;color:#333;}#contents{background:#ddd;border:1pxsolid#ccc;box-shadow:0016px#ccc;}#contents>div{display:none;text-align:justify;padding:10px15px;}#contents>div:first-of-type{display:block;}footer{margin-top:15px;font-size:12px;color:#999;text-align:right;}footer.back{background:#258fb8;border-radius:15px;color:#fff;float:left;font-weight:bold;padding:5px15px;}footer.back:hover{background:#2AA5D5;text-decoration:none;}</style><scriptsrc="/libs/jquery/2.1.4/jquery.min.js"></script></head><body><ulid="tabs"><liclass="enable">选项卡1</li><li>选项卡2</li><li>选项卡3</li><li>选项卡4</li></ul><divid="contents"><div>jquery选项卡切换内容1</div><div>jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2</div><div>jquery选项卡切换内容3</div><div>jquery选项卡切换内容4</div></div><script>(function($){$(#tabsli).each(function(i){var_i=i;$(this).click(function(){$(this).parent().children().removeClass(enable).eq(_i).addClass(enable);$(#contents).children(div).hide().eq(_i).show();});});})(jQuery);</script></body></html>
以上测试代码已经测试通过，可以放心使用！
后续还会分享关于选项卡切换的各种插件以及即插即用的特效！
