我的 HTML:
<!doctype html>
<html>
<head>
<title>Public Vision</title>
<link rel="stylesheet" type="text/css" title="backbone" href="backbone.css">
<link rel="alternative stylesheet" type="text/css" title="alt" href="alt.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body class="style2">
<div id="header" class="style2"><div id="header2" class="style2">Public Vision</div></div>
<iframe width="640" height="400"
src="https://www.youtube.com/embed/videoseries?list=PLX9_I-EOJPdFuOjcI2zkmTck55homHEBE"
frameborder="2" allowfullscreen></iframe>
<input id="showHideContainer" type="image" src="off.jpeg " height="3%" width="2%" alt="On" onclick="toggle()";>
<script>
function toggle(){
$('body').toggleClass('style2');
}
</script>
<script>
document.getElementById('showHideContainer').onclick = function() {
divTest = document.getElementById('header');
if (divTest.style.display === "none") {
divTest.style.display = 'block';
}
else {
divTest.style.display = "none";
}
}
</script>
</body>
</html>
我的CSS:
#header {height: 15%; width: 100%; background-color: white; z-index: 2; position: fixed; right:0; top:0;
box-shadow: 0 4px 4px -2px #232323;
-moz-box-shadow: 0 4px 4px -2px #232323;
-webkit-box-shadow: 0 4px 4px -2px #232323;
}
#header2{height: 15%; width: 100%; position: fixed; color:grey; opacity: 0.6; text-align: center; z-index: 4; font-size: 30px; margin-top: 2.5%; background-color:clear;}
iframe {display:block; margin: 0 auto; margin-top: 17%;}
body{
background-color:grey; z-index:3;
}
body.style2{
background-color:white; z-index:3;
}
目前，我现在拥有的图像在单击时会使标题消失。 关于如何使图像使标题消失并且背景改变颜色有什么想法吗？这里真的碰壁了。提前致谢!
最佳答案
它不起作用的原因是您现在正在覆盖 JavaScript 中的 onclick 事件。您从 input 元素上的 onclick 开始，然后当您在 JavaScript 中再次设置 onclick 时，它会覆盖您原来的 onclick 调用 toggle()。
解决此问题的一种方法是使用 event listeners ，它支持将多个函数绑定(bind)到 onclick，但在您的情况下，只需将 toggleClass 添加到您定义的 onclick 中会更容易JS，然后删除 input 标记中的那个。下面是一个通过使用单个 onclick 函数来切换标题可见性和背景颜色的示例:
工作现场演示:
document.getElementById('showHideContainer').onclick = function () {
divTest = document.getElementById('header');
if (divTest.style.display === "none") {
divTest.style.display = 'block';
} else {
divTest.style.display = "none";
}
$('body').toggleClass('style2');
};body {
background-color:grey;
z-index:3;
}
body.style2 {
background-color:white;
z-index:3;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header" class="style2">
<div id="header2" class="style2">Public Vision</div>
</div>
<input id="showHideContainer" type="image" src="http://i.imgur.com/5LGqY2p.jpg?1" height="100" width="100" alt="On" ;>JSFiddle 版本:https://jsfiddle.net/66cn8L1b/1/
关于javascript - 如何通过单击按钮使标题消失并重新出现，并让按钮更改页面背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32146295/