Question

我试图创建一个直接更改网站颜色主题/颜色/调色板的开关/按钮/链接。

例如，让我们说，在它的夜晚，你更喜欢黑暗的背景，或者在白天，你喜欢明亮的背景。它有点像大多数iPhone应用程序中的黑暗主题和白色主题。还有＆＃34;切换事物＆＃34;在大多数色情网站上，所以人们在他们的电脑屏幕上看不到他们的反思......你知道吗。

我在这里找到了解决方案，但是当CSS中已经设置了背景色时，它们不起作用。我已经尝试了一切。

http://jsfiddle.net/Eqdfs/

这是我使用的代码，但它不起作用：

HTML

<body>
<a id="btn1">black</a><br/>
<a id="btn2">white</a><br/>
<a id="btn3">grey</a>
</body>

CSS

<style>
/*SWITCH*/
body.black {
background: #000000;
}

body.white {
background: #ffffff;
}

body.gray {
background: #C0C0C0;
}
</style>

的JavaScript

<script>
$("#btn1").click(function() {
 $('body').removeClass();
 $('body').addClass('black');
});

$("#btn2").click(function() {
 $('body').removeClass();
 $('body').addClass('white');
});

$("#btn3").click(function() {
 $('body').removeClass();
 $('body').addClass('gray');
});
</script>

我是JavaScript和jQuery的新手，所以请自己解释一下。

感谢您的时间！

以下是有关进一步帮助的截图：http://i.imgur.com/Dj1as35.png

编辑：我找到了解决方案。为了工作，我不得不在head标签中加载jQuery 1.7.2，如下所示：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Answer 1

HTML：

<body>
<a id="btn1">Noise BG</a><br/>
<a id="btn2">RVB BG</a><br/>
<a id="btn3">dunno BG</a>   
</body>

JavaScript的：

$("#btn1").click(function() {
 $('body').removeClass();
 $('body').addClass('black');
});

$("#btn2").click(function() {
 $('body').removeClass();
 $('body').addClass('white');
});

$("#btn3").click(function() {
 $('body').removeClass();
 $('body').addClass('gray');
});

CSS：

body.black {
 background: #000000;
}

body.white {
 background: #ffffff;
}

body.gray {
 background: #C0C0C0;
}

Answer 2

HTML：

> gcc -g -c test.c
> objdump -d -M intel -S test.o > test.asm

CSS：

    <body>
    <a id="btn1">Noise BG</a>
    <a id="btn2">RVB BG</a>
    <a id="btn3">dunno BG</a>

    <ul id="switcher">
  <li id="grayButton"></li>
  <li id="whiteButton"></li>
  <li id="blueButton"></li>
  <li id="yellowButton"></li>
</ul>

<h1>Color Scheme Switcher</h1>

<p>Try clicking on one of the colors above to change the colors on this page!</p>
</body>

JS：

 body {
    background-repeat:repeat;
    background-position:top-left;
}

body.class1 {
    background-image:url('http://www.dca.fee.unicamp.br/~lotufo/Courses/ia-636-1995/alberto/proj5/html/pattern_Id.gif');
    color:yellow;
}

body.class2 {
    background-image:url('http://upload.wikimedia.org/wikipedia/commons/e/ec/Pattern_square_16.png');
    color:red;
}

body.class3 {
    background-image:url('http://www.herbactive.com.br/catalog/view/theme/default/image/pattern/pattern-11.png');
    color:blue;
}


a {
    display:inline-block;
    width:120px;
    background:#ffffff;
    cursor:pointer;
    margin:2px 0;
}
body {
  margin: 3em;
  padding: 0;
  font-family: sans-serif;
  font-size: 18px;
  line-height: 1.5;
}
body.gray {
  background: gray;
  color: white;
}
body.white {
  background: white;
  color: black;
}
body.blue {
  background: blue;
  color: white;
}
body.yellow {
  background: yellow;
  color: black;
}

h1 {
  line-height: 1.25;
  margin: 2em 0 0;
}
p {
  margin: .5em 0;
}

#switcher {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#switcher li {
  float: left;
  width: 30px;
  height: 30px;
  margin: 0 15px 15px 0;
  border-radius: 30px;
  border: 3px solid black;
}

#grayButton {
  background: gray;
}
#whiteButton {
  background: white;
}
#blueButton {
  background: blue;
}
#yellowButton {
  background: yellow;
}

创建一个更改网站调色板的开关

2 个答案: