jquery实现简单的tab切换

样式：

   .nav{

            margin-bottom: 20px;

            overflow: hidden;

        }

        .nav li{

            float: left;

            margin-right: 20px;

            list-style: none;

            cursor: pointer;

        }

        .nav .on{

            color: orange;

        }

        /* 

        内容 */

        .box .content{

            width: 100px;

            height: 100px;

            border: 1px solid #ccc;

            display: none;  

        }

        .box .current{

          display: block;  

        }

结构：

    <!-- 切换导航 -->

    <div class="nav">

        <ul>

            <li class="on">nav1</li>

            <li>nav2</li>

            <li>nav3</li>

        </ul>

    </div>

    <!-- 切换内容 -->

    <div class="box">

        <div class="content current">内容1</div>

        <div class="content">内容2</div>

        <div class="content">内容3</div>

    </div>

js：

$(".nav").on("click","li",function(){

               $(this).addClass("on").siblings().removeClass("on")

               $(".box .content").eq($(this).index()).addClass("current").siblings().removeClass("current") 

            })