jQuery 选项卡切换特效代码（点击切换）

之前使用选项卡切换，喜欢用各种小插件，也许是因为封装的比较好，但也有不少前端不喜欢插件，喜欢自己写原始JS，或者使用jquery写选项卡切换功能！

今天就不分享选项卡切换的插件了，就分享个如上图的jquery选项卡切换简单特效：

!DOCTYPE html>
    html>
    head>
    meta charset="utf8">
    title>
    如何利用jQuery製作頁籤 - 基礎範例/title>
    style>
* {
     margin: 0;
     padding: 0;
}
body {
     font: 300 14px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
     width: 500px;
     margin: 50px auto;
     background: #eee;
     color: #333;
     line-height: 1.5;
}
a {
     color: #258fb8;
     text-decoration: none;
}
a:hover {
     text-decoration: underline;
}
#tabs li {
     background: #ddd;
     border: 1px solid #ccc;
     border-bottom: none;
     display: inline-block;
     margin-right: 5px;
     padding: 5px 10px;
     color: #999;
     cursor: pointer;
}
#tabs li:hover {
     color: #666;
}
#tabs li.enable {
     border-bottom: 1px solid #ddd;
     margin-bottom: -1px;
     color: #333;
}
#contents {
     background: #ddd;
     border: 1px solid #ccc;
     box-shadow: 0 0 16px #ccc;
}
    #contents>
div {
     display: none;
     text-align: justify;
     padding: 10px 15px;
}
    #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: 5px 15px;
}
footer .back:hover {
     background: #2AA5D5;
     text-decoration: none;
}
    /style>
    script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    /script>
    /head>
    body>
    ul id="tabs">
      li class="enable">
    选项卡 1/li>
      li>
    选项卡 2/li>
      li>
    选项卡 3/li>
      li>
    选项卡 4/li>
    /ul>
    div id="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($){
  $('#tabs li').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>
    

以上测试代码已经测试通过，可以放心使用！

后续还会分享关于选项卡切换的各种插件以及即插即用的特效！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！