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