选项卡使用

第一种方法：

 <div class="to-center">
             <ul class="left-ul">
               <li class="chosen"    show_content_class="below-friends">邀请好友</li>
             </ul>
             <ul class="right-ul">
               <li      show_content_class="my-prize">我的奖励</li>
             </ul>
 </div>
      <div class="for-tab">
        <ul class="my-content below-friends" style="display:block;"></ul>
        <ul class="my-content my-prize" style="display:none;"></ul>

 </div>

<script>

   $(".to-center ul li").click(function(){
        $(this).removeClass().addClass("chosen")
        $(this).parent().siblings().find("li").removeClass("chosen");

        $(".my-content").hide();   //先隐藏所有
        $(".my-content."+$(this).attr('show_content_class')).show();   ／／再显示所需，用加号连接
    });

</script>

第二种和第三种方法：

$(".tab-top li").click(function(){
        $(this).removeClass().addClass("selected").siblings().removeClass("selected");
        $(".tab-under ul.page-li").hide();
        $(".tab-under ul.page-li:eq("+$(this).index()+")").show();

        // $(".tab-under ul.page-li").eq($(this).index()).show();
      });