一、操作方法
主要有两种方法:一种是操作css方法,另外一种是设置类样式。
操作css方法
- 参数只写属性名,则返回属性值
- 参数是属性名,属性值,逗号隔开,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
- 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不加引号
$("div").css({width:400,height:400,backgroundColor:"red"})
//如果是复合属性则必须采取驼峰命名法,如果值不是数字,则需要加引号
设置类样式
- 添加类 addClass()
- 删除类 removeClass()
- 切换类 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>
运行图片