jQuery切换类来改变css背景

Question

我正在构建一个全屏显示照片的网页，并希望为用户提供使用一组简单的链接在黑色和白色之间切换背景颜色的能力:

<ul id="switch">
    <li id="white" class="current">White</li>
    <li id="black">Black</li>
</ul>

body.white { background: #f0f0f0 url('white.png'); }
body.black { background: #222222 url('black.png'); }

计划是使用一类 current 显示当前选择了哪个，单击时将淡入和淡出不同的配色方案。谁能帮忙？

编辑:只是为了确认我想切换主体上的类，而不仅仅是更改背景颜色的 CSS。

谢谢

Answer 1

你可以这样做:

$('#switch li').click(function(){
  $('body').css('background', this.id);
  $('#switch li').removeClass('current');
  $(this).addClass('current');
});

以上代码将背景颜色应用于 body (如果元素是其他元素，您可以替换)当 li 时被点击(您可以使用链接)。还有 current从所有 lis 中删除类然后应用于点击的一个。