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'); }

计划是显示当前使用一类电流选择哪一个，当点击时将淡入和淡出不同的配色方案。有人可以帮忙吗？

编辑：只是为了确认我想要在正文中切换类而不只是更改背景颜色的CSS。

由于

Answer 1

你可以这样做：

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

如果点击body，则上面的代码会将背景颜色应用于li（如果元素是其他元素，则可以替换）（您可以使用链接）。此外，current课程已从所有lis中删除，然后应用于点击的课程。

Answer 2

如果您想使用课程而不仅仅是改变CSS ...

$('#switch li').click(function(){
  $('body').removeClass('white black').addClass(this.id);
  $('#switch li').removeClass('current');
  $(this).addClass('current');
});

Answer 3

$("#white").click(function() {
    $("body").css("background", "white")
});

$("#black").click(function() {
    $("body").css("background", "black")
});

Answer 4

实际上比拥有两种不同的lis更容易。

无论你的背景元素（#back）是什么，点击id为“switch”的东西：

$('#switch').click(function() {
  a = $('#back').css('background');
  if (a == 'black') {
  $('#back').css('background','white');
  }
  else {
  $('#back').css('background','black');
  }
});

jQuery switch类改变css背景

4 个答案: