HTML
<img src="img/none.png" alt="" id="none">
<img src="img/red.png" alt="" id="red">
<img src="img/yellow.png" alt="" id="yellow">
<img src="img/blue.png" alt="" id="blue">
<button id="change">点我</button>
CSS
img:nth-child(n+2) {
display: none;
}
JS代码
window.onload = function() {
var change = document.getElementById("change");
var none = document.getElementById("none");
var red = document.getElementById("red");
var yellow = document.getElementById("yellow");
var blue = document.getElementById("blue");
change.onclick = function() {
if (none.style.display != "none") {
red.style.display = "inline";
none.style.display = "none";
} else if (red.style.display != "none") {
yellow.style.display = "inline";
red.style.display = "none";
} else if (yellow.style.display != "none") {
blue.style.display = "inline";
yellow.style.display = "none";
} else {
none.style.display = "inline";
blue.style.display = "none";
}
};
};
分析待续
图片资料
none.png
red.png
yellow.png
blue.png
另种解法
<style>
.hidden {
display: none;
}
.show {
display: inline;
}
</style>
<script>
window.onload = function() {
var change = document.getElementById("change");
var none = document.getElementById("none");
var red = document.getElementById("red");
var yellow = document.getElementById("yellow");
var blue = document.getElementById("blue");
change.onclick = function() {
if (none.className == "show") {
red.className = "show";
none.className = "hidden";
} else if (red.className == "show") {
yellow.className = "show";
red.className = "hidden";
} else if (yellow.className == "show") {
blue.className = "show";
yellow.className = "hidden";
} else {
none.className = "show";
blue.className = "hidden";
}
};
};
</script>
</head>
<body>
<img src="img/none.png" alt="" id="none" class="show">
<img src="img/red.png" alt="" id="red" class="hidden">
<img src="img/yellow.png" alt="" id="yellow" class="hidden">
<img src="img/blue.png" alt="" id="blue" class="hidden">
<button id="change">点我</button>
</body>
