jquery触发a标签的点击事件，jquery find 多个class，jquery模板条件判断，jquery body添加事件，jquery的.html()，jquery easyui商用，jquery动画循环，jquery is first，jquery 变为正数，jquery触发a标签的点击事件
之前使用选项卡切换，喜欢用各种小插件，也许是因为封装的比较好，但也有不少前端不喜欢插件，喜欢自己写原始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="
http://apps.bdimg.com/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>以上测试代码已经测试通过，可以放心使用！
后续还会分享关于选项卡切换的各种插件以及即插即用的特效！