Web前端开发笔记52——Jquery修改css样式的方法，类样式方法、className和JQ类操作区别

1.有三种修改css的写法。

需要注意的是：第三种写法，如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号。

2.设置类样式方法：

第三种类型可以用于，一会儿关闭一会切换的实现。

3.借助上面所学内容，我们再做一个tab栏。

<div class="tabnav">
    <div>化妆品</div>
    <div>珠宝</div>
    <div>电脑</div>
    <div>日常用品</div>
</div>
<div class="content">
    <div>这里是化妆品</div>
    <div>这里是珠宝</div>
    <div>这里是电脑</div>
    <div>这里是日常用品</div>
</div>
<script>
    $(".tabnav>div").bind("mouseover", function () {
        $(".content>div").eq($(this).index()).removeClass().addClass("content show").siblings("div").removeClass().addClass("content hide")
    })
</script>

效果如下：

当鼠标移动到某一项上我们就会显示相关内容的div。

4.原生JS中我们的className会把我们的类给替换掉，而在JQ中我们只对需要执行操作的类进行操作。