非插件，css + jquery 实现tab页效果

需求：通过css+jquery实现tab选项卡切换页面效果，效果如图

代码+原理解析：

<div class="body_box_div"> 
    <div class="container">                    
        <ul class="tabs">  
            <li class="active"><a href="#tab1">头像设置</a></li>  
            <li><a href="#tab4">基本资料</a></li>  
        </ul>  
        <div class="tab_container">  
            <div id="tab1" class="tab_content" style="display: block; ">  
                内容一
            </div>  <!--头像设置 end-->
              
            <div id="tab4" class="tab_content" style="display: none; "> 
             
               内容二
        
            </div>  
        </div>  
    </div>  
</div>

其中：<ul>标签中的内容表示 tabs 页签名，这里一个叫“头像设置”，一个叫“基本资料”。

而".tab_container"中的两个<div> 分别表示两个页签的实际内容。一个页签以“block”展示，另一个以“none”展示。

css样式表：

.body_box_div{
	width:100%;
	height:700px;
	background:#fff;
	padding-top:20px;	
}
	.container {
		width: 700px; 
		min-width:700px;
		margin-left:40px;
	}
		ul.tabs {
			margin: 0;
			padding: 0;
			float: left;
			list-style: none;
			height: 32px;
			margin-left:30px;
			width: 100%;
		}
			ul.tabs li {
				float: left;
				margin: 0;
				padding: 0;
				height: 31px;
				line-height: 31px;
				margin-bottom: -1px;
				overflow: hidden;
				position: relative;
			}
				ul.tabs li a {
					text-decoration: none;
					color: #000;
					display: block;
					font-size: 14px;
					padding: 0 20px;
					border: 1px solid #fff;
					outline: none;
				}
					ul.tabs li a:hover {
						background: #ccc;
					}	
					
					
html ul.tabs li.active{       /* 此处控制页签的轮廓线 */
	background: #fff;
	border-bottom: 1px solid #fff;
	border-left:1px solid #dcdcdc;
	border-right:1px solid #dcdcdc;
	border-top:2px solid #3ab1bc;
}
.tab_container {
	border-top: none;
	clear: both;
	float: left; 
	width: 100%;
	height:600px;
	background: #fff;
	border-top:1px solid #dcdcdc;
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
	padding: 20px;
	font-size: 14px;
}
.tab_content h2 {
	font-weight: normal;
	padding-bottom: 10px;
	border-bottom: 1px dashed #ddd;
	font-size: 1.8em;
}
.tab_content h3 a{
	color: #254588;
}

下面解析 jQuery 切换页签的原理：

$(document).ready(function() {  
  
    //缺省行为  
    $(".tab_content").hide(); //隐藏所有 content  
    $("ul.tabs li:first").addClass("active").show(); //激活第一个 tab的 li  
    $(".tab_content:first").show(); //显示第一个 tab 的content  
      
    //点击事件
    $("ul.tabs li").click(function() {  
        $("ul.tabs li").removeClass("active"); //移除 "active" 样式  
        $(this).addClass("active"); //给选中的tab页添加 "active" 样式
        $(".tab_content").hide(); //隐藏 其他tab 页内容
        var activeTab = $(this).find("a").attr("href"); //在 <li> 中寻找 <a> 的 href链接
        $(activeTab).fadeIn(); //对该链接实现“淡入淡出效果”  
        return false;  
    });  
  
});