非插件，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;  
    });  
  
});