jquery简单tab切换 源码

实现tab切换js有好几种方法，但要写成可复用性高、简单的我认为是jq写的。以下是源码：
HTML

<section>
    <nav id="nav">
      <a class="on">tab1</a>
      <a>tab2</a>
      <a>tab3</a>
      <a>tab4</a>
    </nav>
    <div id="contentBox">
      <div class="box active">内容一</div>
      <div class="box">内容二</div>
      <div class="box">内容三</div>
      <div class="box">内容四</div>
    </div>
 </section>

CSS（css根据你的UI大叔设计图决定）

*{box-sizing:border-box;}
#nav{height:50px;}
#nav a{display:block;height:50px;line-height:50px;padding:0 15px;font-size:18px;text-align:center;font-family: 'Microsoft YaHei';float:left;background-color:#e1e1e1;cursor:pointer;}
#nav a.on{border-bottom:2px solid #e60012;}
#contentBox{width:280px;height:100px;}
#contentBox .box{text-align:center;line-height:100px;font-size:24px;font-weight:blod;display:none;}
#contentBox .box.active{display:block;}

JS

//简单jq tab
$(function(){
     $("#nav a").off("click").on("click",function(){
        var index = $(this).index();
        $(this).addClass("on").siblings().removeClass("on");
        $("#contentBox .box").eq(index).addClass("active").siblings().removeClass("active");
      });
    });