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

我正在尝试创建一个开关/按钮/链接，它直接更改网站上的颜色主题/颜色/调色板。创建一个开关，更改网站的调色板

例如，假设在夜晚时您希望有深色背景，或者在白天时您更喜欢明亮的背景。它有点像大多数iPhone应用程序中的黑暗主题和白色主题。在大多数色情网站上也有这种“切换东西”，所以人们在他们的电脑屏幕上不会看到他们的反映。

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

下面是我使用的代码，但它不工作：

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

编辑：我找到了解决办法。为了工作，我只好加载了jQuery 1.7.2头标记，像这样：

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

来源

2014-07-17 Goldenoir

安置自己的代码，以便我们可以看到。为什么你不使用你在jsFiddle-link中提供的代码？ – simeg

我为我演奏小提琴。此外，'.class3'背景图片网址已损坏。 – DontVoteMeDown

耶的jsfiddle代码似乎为我工作得很好。 – DasBeasto

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

来源

2014-07-17 17:37:43 MannfromReno

谢谢，现在我明白了。但它不起作用。我试图把它放在Tumblr的博客上。那会是原因吗？ – Goldenoir

如果博客允许添加自定义HTML/CSS/JavaScript，那么它应该可以工作，我对它不够熟悉。看看这篇文章：http://www.problogtricks.com/2013/12/add-custom-css-javascript-code-to-tumblr-blog.html – MannfromReno

是的，它的确是Tumblr的重点，您可以自定义HTML，CSS和JavaScript。我发布了我在原始帖子中使用的代码。感谢您的链接。 – Goldenoir

HTML：

<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>

CSS：

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

JS：

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

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

$("#btn3").click(function() { 
$('body').removeClass(); 
$('body').addClass('class3'); 
}); 
$('#grayButton').click(switchGray); 
$('#whiteButton').click(switchWhite); 
$('#blueButton').click(switchBlue); 
$('#yellowButton').click(switchYellow); 

function switchGray() { 
    $('body').attr('class', 'gray'); 
} 

function switchWhite() { 
    $('body').attr('class', 'white'); 
} 

function switchBlue() { 
    $('body').attr('class', 'blue'); 
} 

function switchYellow() { 
    $('body').attr('class', 'yellow'); 
}

来源

2017-05-22 09:07:05 Jitendra

请解释答案 – lalithkumar

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

回答

相关问题