在我的页面上,我有以下主题更改按钮:
<button class="small theme" name="darkBlue" onclick="setThemeColor(this)">
<span style="color: white; font-weight: bold;">#</span>
</button>
<button class="small theme" name="black" onclick="setThemeColor(this)">
<span style="color:black; font-weight:bold;">#</span>
</button>
我有这个javascript:
<script type="text/javascript">
if (localStorage.themeColor) {
document.getElementsByTagName('html')[0].className = localStorage.themeColor;
}
function setThemeColor(button) {
localStorage.themeColor = button.name;
document.getElementsByTagName('html')[0].className = button.name;
var themeButtons = document.querySelectorAll(".theme");
for (var themeButton in themeButtons) {
themeButtons[themeButton].disabled = false;
}
button.disabled = true;
}
</script>
这总是显示两个按钮,但我想这样而不是 当前按钮被禁用然后该按钮不可见。有人可以 建议我怎么做?
答案 0 :(得分:0)
function setThemeColor(button) {
localStorage.themeColor = button.name;
document.getElementsByTagName('html')[0].className = button.name;
var themeButtons = document.querySelectorAll(".theme");
for (var themeButton in themeButtons) {
themeButtons[themeButton].disabled = false; // Re-included from original code
themeButtons[themeButton].style.visibility="visible" // Corrected from original answer
}
button.disabled = true;
button.style.visibility="hidden" // Added/Moved from above after noted I'd messed up the logic
}