jq操作class类 - 爱码网

https://www.cnblogs.com/sandraryan/

鼠标移入移除切换样式

方法一：

css  
.menu {
        color: green;
    }
    .active {
        color: red;
        text-decoration: underline;
    }

html
    <h2 class="menu">this is h2 tag</h2>

js/jq
　　$(\'.menu\').on({
        mouseover : function(){
            $(\'.menu\').attr(\'class\',\'active menu\');
        },
        mouseout : function(){
            $(\'.menu\').attr(\'class\',\'menu\');

        }
    });

方法二

addClass() 添加类名

removeClass() 移除类名

    $(\'.menu\').on({
        mouseover : function(){
            $(\'.menu\').addClass(\'active\');
        },
        mouseout : function(){
            $(\'.menu\').removeClass(\'active\');

        }
    });

方法三

hover 合成事件（mouseover+mouseout）

（js无hover事件）

    $(\'.menu\').hover(function(){
        $(\'.menu\').addClass(\'active\');

    },function(){
        $(\'.menu\').removeClass(\'active\');
    })

点击切换class类名

    <h2 class="item">this is h2 tag</h2>

    $(\'.item\').click(function(){
        $(\'.item\').toggleClass(\'active\');
    });

toggleClass（）； 切换class类名