tab选项卡

<!--页面代码-->
<div class="tab">
    <a href="###" data-tab="#tab0">标题一</a>  <!--这个地方给a设置href="###"，是防止点a时页面跳转时出现的页面跳动-->
    <a href="###" data-tab="#tab1">标题二</a>
    <a href="###" data-tab="#tab2">标题三</a>
</div>
<div id="tab0" class="content">
       我是标题一
</div>
<div id="tab1" class="content">
       我是标题二
</div>
<div id="tab2" class="content">
       我是标题三
</div>

Js

<script>
   $(".tab").find("a").click(function(){       //找到tab里面的a
         $(".content").hide();                         //隐藏所有class为content的元素
         $($(this).attr("data-tab")).show();    //返回tab里面a属性data-tab的值，显示这个值所在的元素
});

</script>

提示：

如果jq写在html的前面，要给jq前面添加

$(document).ready(function(){

      这个地方放上面的js代码

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

• 试图隐藏一个不存在的元素
• 获得未完全加载的图像的大小（w3c:http://www.w3school.com.cn/jquery/jquery_syntax.asp）