<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding: 0;}
body{font-size: 62.5%;padding:20em;}
p { margin-left:10px; }
.container{ 30em;height:auto;height:auto;}
ul{list-style: none;border-bottom: 1px solid #ccc;padding:0;}
ul.tabs:before,ul.tabs:after{display:table;line-height: 0;content:""; }
ul.tabs:after{ clear:both;}
ul li{/*display:inline-block;*/ float:left;}
ul li a{line-height:20px;border:1px solid #ccc;padding:.8em;border-bottom-color:transparent;display:block;}
ul li a{color: #000;}
ul li.active a{color: #08c;border-bottom-color:transparent;margin-bottom:-1px;}
.tab-content{padding-top:20px;padding-left: 20px;}
.tab-content .hide{display:none;}
</style>
</head>
<body>
<div class="container">
<ul id="myTab" class="tabs">
<li class="active"><a href="#hello" >hello</a></li>
<li><a href="#world">world</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane tab-hello">hellohellohellohellohellohellohello</div>
<div class="tab-pane tab-world hide">worldworldworldworldworldworldworldworld</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$("#myTab a").on("click",function(e){
e.preventDefault();
var $tab = $(this);
var pane = $tab.attr("href").replace("#",""); //这个完全可以用id不需要replace("#","")，要是想省事干脆a标签都可以去掉
$tab.parent().addClass("active").end().css({'background':'#f9e590'}); // 用了链式的调用这个end() 退到之前$tab状态（纯粹是为了用而用链式的调用）
$tab.parent().siblings().removeClass("active").end().siblings().find("a").css({'background':''}); //这个让我特别疑惑它指向不是a而是li 做个标记以后回头看看
$tab.parents().find(".tab-"+pane).css("display","block");
$tab.parents().find(".tab-"+pane).siblings().css("display","none");
});
});
</script>
</body>
</html>
知识点大概就是链式调用了相关API: http://www.jquery123.com/end/
jQuery的链式操作原理简介：http://www.zhangyunling.com/?p=207