在使用 jQuery 時,常會有選中元素添加樣式的需求。這個過程非常簡單,使用 .addClass() 方法即可實現。例如:
$('li').click(function() { $(this).addClass('selected'); });
上面的代碼表示,當 li 元素被點擊時,會為它添加一個名為 selected 的樣式。這里需要注意的是,如果刷新頁面,選中元素的樣式會被清除。
為了避免這種情況的發生,可以使用 localStorage 在本地保存選中元素的標識。代碼如下:
$('li').click(function() { $(this).addClass('selected'); localStorage.setItem('selected', $(this).index()); }); $(document).ready(function() { var selected = localStorage.getItem('selected'); if (selected !== null) { $('li').eq(selected).addClass('selected'); } });
這里使用了 localStorage API,在點擊 li 元素時保存了它的索引值,并在頁面刷新時讀取該值,將選中狀態重新賦予到對應的元素上。這樣,即使刷新頁面,選中元素的樣式也會依舊保留。
下一篇css常用的樣式詞典