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>

运行图片