jQuery中常用的样式操作有两种:css() 和 设置类样式方法
jQuery 可以使用 css 方法来修改简单元素样式; 也可以操作类,修改多个样式。
常用以下三种形式 :
// 1.参数只写属性名,则是返回属性值
var strColor = $(this).css('color');
// 2. 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');
// 3. 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});
注意:css() 多用于样式少时操作,多了则不太方便。
作用等同于以前的 classList,可以操作类样式, 注意操作类里面的参数不要加点。
常用的三种设置类样式方法:
// 1.添加类
$("div").addClass("current");
// 2.删除类
$("div").removeClass("current");
// 3.切换类
$("div").toggleClass("current");
注意:
思路分析: 1.点击上部的li,当前li 添加current类,其余兄弟移除类。2.点击的同时,得到当前li 的索引号3.让下部里面相应索引号的item显示,其余的item隐藏
<script>
$(function () {
$(".tab_list li").click(function () {
$(this).addClass("current").siblings().removeClass();
var index = $(this).index();
$(".tab_con .item").eq(index).show().siblings().hide();
});
});
</script>