jQuery樣式操作（Tab欄切換）

一、操作方法

主要有兩種方法：一種是操作css方法，另外一種是設置類樣式。

操作css方法

1. 參數只寫屬性名，則返回屬性值
2. 參數是屬性名，屬性值，逗號隔開，是設置一組樣式，屬性必須加引號，值如果是數字可以不用跟單位和引號
3. 參數可以是對象形式，方便設置多組樣式。屬性名和屬性值用冒號隔開，屬性可以不加引號

$("div").css({width:400,height:400,backgroundColor:"red"})
//如果是複合屬性則必須採取駝峯命名法，如果值不是數字，則需要加引號

設置類樣式

1. 添加類 addClass()
2. 刪除類 removeClass()
3. 切換類 toggleClass()

二、Tab欄切換

要實現的效果圖如下：

設計思路

這個tab欄切換的結構是一個大的div,裏面裝着兩個小的div，這兩個div是上下結構。上邊的div裏面放着li，第一個li設置一個默認樣式（點擊的狀態），其它li則是沒有默認樣式，當鼠標點擊誰，誰就變成默認樣式。下邊的div裏放着div裏面寫li對應的內容。當鼠標點擊哪個li是對應的div就變成對應的那個。

代碼

			*{
				padding: 0;
				margin: 0;
				list-style: none;
				font-size: 12px;
				text-decoration: none;
				}
			.tab{
				width: 500px;
				height: 300px;
				margin: 100px auto;
			}
			.tab_list{
				height: 50px;
				background: palevioletred;
			}
			.tab_list ul li{
				float: left;
				width: 98.8px;
				height: 48px;
				border-left: 1px solid white;
				border-bottom: 1px solid white;
				border-top: 1px solid white;
				text-align: center;
				color: black;
				line-height: 48px;
			}
			.tab_list .current{
				background: #c81623;
				color: #fff;
			}
			.tab_con{
				height: 250px;
				background:white;
				border: 1px solid palevioletred;
				margin-top: -0.5px;
			}
			.tab_con .item{
				width: 500px;
				height: 250px;
				display: none;
			}
		
		
		<div class="tab">
			<div class="tab_list">
				<ul>
					<li class="current">商品介紹</li>
					<li>規格與包裝</li>
					<li>售後保障</li>
					<li>商品評價</li>
					<li style="border-right: 1px solid white;">手機社區</li>
				</ul>
			</div>
			<div class="tab_con">
				<div class="item" style="display: block;">
					商品介紹模塊內容
				</div>
				<div class="item">
					規格與包裝模塊內容
				</div>
				<div class="item">
					售後保障模塊內容
				</div>
				<div class="item">
					商品評價模塊內容
				</div>
				<div class="item">
					手機社區模塊內容
				</div>
			</div>
		</div>
		<script>
			$(function(){
				//點擊上部的li，當前li添加current類，其餘兄弟移除類
				$(".tab_list li").click(function(){
					//鏈式編程操作
					$(this).addClass("current").siblings().removeClass("current");
					//點擊的同時，得到當前li的索引號
					var index = $(this).index();
					//讓下部裏面相應索引號的item顯示，其餘的item隱藏
					$(".tab_con .item").eq(index).show().siblings().hide();
				})
			})
		</script>

運行圖片