Question

因此，基于布尔值，我希望侧边栏中的某些选项卡能够在页面加载时显示/隐藏。

var someVar = true;

function show_ifTrue() {
    if (Boolean(someVar) == true) {
        document.getElementById('x').style.display = 'block'; 
        console.log("I CHANGED IT");
    }
    else {
      document.getElementById('x').style.background = 'red';
    }
}

.sidebar {
    position: fixed;
    overflow-y: scroll;
    top: 0;
    bottom: 0;
    float: left;
    display: inline-block;
    z-index: 50;
}
#tab {
    display: block;
}
#x {
    display: none;
}

<div class="sidebar">
    <a href="#" id="tab"> Cats </a>
    <a href="#" id="x" onpageshow="show_ifTrue();"> Dogs</a>
</div>

我已经尝试了从.sidebar a{...}取出显示并使用!important为每个标签显示自己的显示属性，使用style.cssText更改JS或设置属性，我只是可以不能让它改变显示。

Answer 1

为了更改颜色，您必须先调用该函数，但是您永远不会调用它，因为onpageshow只能添加到<body>，因此您可以将其移动到那里 - { {1}}。或者，如果您仍然只想处理div本身，请执行onload：

<body onpageshow='...'>

这种方式也可以使用您的pageshow：

window.onload=function(){
    show_ifTrue();
}

此外，您的函数中不需要布尔前缀，只需要window.onpageshow=function(){ show_ifTrue(); }。

Answer 2

看来你错过了#tab的css关闭braket（编辑：OP编辑了这个，但它也可能是问题的一部分）。此外，您可能希望在body元素上使用window.onload或onpageshow - 它是唯一可以处理的元素。修复后，这是一个有效的例子：

window.onload = function () {
    show_ifTrue();
}

var someVar = true;

function show_ifTrue() {
    if (someVar === true) {
        document.getElementById('x').style.display = 'block'; 
        console.log('I CHANGED IT');
    }
    else {
        document.getElementById('x').style.background = 'red';
    }
}

.sidebar {
    position: fixed;
    overflow-y: scroll;
    top: 0;
    bottom: 0;
    float: left;
    display: inline-block;
    z-index: 50;
 }

#tab {
    display: block;
}

#x {
    display: none;
}

<div class="sidebar">
    <a href="#" id="tab"> Cats </a>
    <a href="#" id="x"> Dogs</a>
</div>

我希望有所帮助！

Javascript的新功能 - 改变元素的风格

2 个答案: