js:新增/移除class

簡易的JQuery應用,新增/移除class

寫網頁的時候,某些物件常常需要點一下就幫它加上一個新樣式,或者是點擊A,幫A加上新樣式的同時也將B的樣式除移,太常用了所以紀錄一下。

來源:add Class & remove class on click, remove class from other in list too - JSFiddle

HTML結構

<ul>
    <li><a href="#" id="about-link">ABOUT</a></li>
    <li><a href="#" id="events-link">EVENTS</a></li>
    <li><a href="#" id="reviews-link">REVIEWS</a></li>
    <li><a href="#" id="contact-link">CONTACT</a></li>
</ul>

 

JQuery語法 當連結被點擊的時候,a標籤會加上.current,同時若有其它a標籤帶了current,移除之

$('ul li a').click( function(){
    if ( $(this).hasClass('current') ) {
        $(this).removeClass('current');
    } else {
        $('li a.current').removeClass('current');
        $(this).addClass('current');    
    }
});

 

CSS語法
重點大既就是transition這個效果要記一下,實用

a {
    transition:all 200ms;
    color:#333;
    background:#eaeaea;
}
.current {
    color:#900;
    background:#bbb;
}

 

實作效果﹙跟上述案例無關




 迴響列表

目前還沒有任何留言


 留言表單

如果想要使用回覆功能,或是刪除修改自己的留言,可以登入網站後再來留言。

🧨 Method Illuminate\View\View::__toString() must not throw an exception, caught ParseError: syntax error, unexpected 'array' (T_ARRAY), expecting function (T_FUNCTION) or const (T_CONST)