<div class="box">

    <ul>

        <li class="one">选项卡1</li>

        <li>选项卡2</li>

        <li>选项卡3</li>

    </ul>

    <div class="content">

        <div class="ct">菜单1</div>

        <div class="ct">菜单2</div>

        <div class="ct">菜单3</div>

    </div>

</div>

$(document).ready(function(){//jq入口

    $('.ct:gt(0)').hide();//gt()选择器，选中索引后的全部

    var tab = $('.box ul li');//定义是为了后面写的方便

    tab.click(function(){//选项卡当然是基于点击的

        $(this).addClass('one').siblings().removeClass('one');//选中的项，加一个选中的样式，兄弟删除该样式的类名

        var tab_index = tab .index(this);//.index()定义选项卡的索引

        $('.ct').eq(tab_index).show().siblings().hide();//把内容关联选项卡的索引，使内容随选项卡被点击而产生变化  ||  eq()选择器，选中该索引的项

    });

});