新增/移除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;
}

 

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




 迴響列表

    這篇文章還沒有迴響喔,快點搶頭香!

 留下迴響

您留的email將不會被公開,如果您有gravatar帳號,email將會是您的頭像顯示依據。*為必填的欄位

驗證碼

關於這個網站

在這個年代,個人網站的存在是非常難能可貴的。何況還是自己寫的,簡直就是人間的塊寶,世界的遺產。

Read More
艾吉碎碎唸

8個多月前寫了這個網站,已經半年多沒空幫它擴充新功能,然而現在已經開始有一種“哇靠這網站真的是我自己寫出來的嗎?“的感概了...

最新PO文
Go to Blog
Social Accounts