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类名

转载于:https://www.cnblogs.com/sandraryan/p/11528744.html