在javascript中覆盖CSS样式'display：none'

Question

我正在尝试添加一个复选框切换，通过将它们的样式显示属性从“无”更改为“内联”来隐藏和显示列表元素，但它不起作用。我在 CSS 文件中将属性的样式设置为“display:none”。然后当有人选中一个框时，我将其设置为 javascript 中的“display:inline”。 javascript 成功地将元素的属性更改为内联，但由于某种原因，该元素仍然不可见。

如果我做相反的事情，通过在 CSS 中将显示设置为内联并在 javascript 中将其覆盖为无，它可以正常工作。我不明白为什么这会以一种方式起作用，而另一种则不起作用。

我正在使用铬。这是代码。任何反馈都表示赞赏。

CSS 文件：

#tabmenu li[status='disabled'] a, a.active, #disabled { 
    color: #777777; 
    background: #DDDDDD;
    font: normal 1em Arial; 
    border: 1px solid black; 
    border-radius: inherit;
    padding: 0px 5px 0px 5px; 
    margin: 0px; 
    text-decoration: none;
    cursor:hand; 
    display:none;
} 

HTML：

<ul id="tabmenu">       
    <li name='tab' id='tab1' selected='no' status='disabled'></li>      
</ul>

JAVASCRIPT（来自命令行，或复选框的更改）

tab = document.getElementById('tab1');
tab.style.display = 'inline';

更新：我知道我可以将“显示：无”移出 CSS，并在使用 javascript 加载页面时将其设置为无。但是如果我这样做，它将在页面加载后隐藏它们，这意味着，在较慢的计算机上，用户可以看到它们短暂地闪烁到可见性中。这就是为什么我使用 css 来设置初始状态，然后在选中或取消选中该框时尝试覆盖它。

更新 2： 让我强调一下，如果我将元素设置为在 css 中可见，然后在更改复选框时将其隐藏，则此代码可以正常工作。但是如果元素最初在 css 中设置为不可见，则复选框无法使元素可见。所以看起来是页面加载后css "display: none" 不能被覆盖，但是css "display: inline" 可以的问题。

Answer 1

您已将li 中的a 元素设置为隐藏，因此将选项卡设置为可见是不够的。将容器（li）设置为可见不会使内容（a）可见。

您可能希望将规则更改为

#tabmenu li[status='disabled'], a.active, #disabled { 

Answer 2

这样看，也许你可以通过以下步骤解决你的问题：

使用以下代码在 css 上创建 .visible 类：

.visible {
  display: inline !important;
}

并创建另一个类.hidden：

.hidden {
  display: none !important;
}

然后，使用此代码Hide 您的元素：

tab = document.getElementById('tab1');
tab.className = 'hidden';

将此代码发送到Show您的元素：

tab = document.getElementById('tab1');
tab.className = 'visible';

重要提示：使用此解决方案，您可以从CSS 上的display:none 开始，之后设置可见时不会出现问题，因为!important 类上的overwrite 标记全部，所以你不会有隐藏它的问题。

Answer 3

CSS 目标 <a> 标记隐藏，javascript 正在更改 <li>，子 <a> 仍将被隐藏

Answer 4

您的 CSS 在标签中隐藏了 a 元素，而不是标签本身：

#tabmenu li[status='disabled'] a {
}

更改选项卡的样式不会撤消该操作。

如果您的 CSS 是：

#tabmenu li[status='disabled'], a.active, #disabled {
  ...
}

那么更改display 会很有用。

Answer 5

您应该具有检查复选框状态的功能，我已将其添加到标记中

<ul id="tabmenu">       
<li name='tab' id='tab1' selected='no' status='disabled'>some text</li>      
</ul>
<label>
<input type="checkbox" id="check"/>show text
</label>

然后下一个代码将检查您的复选框的状态并更改选项卡的可见性

$(function () {     //document ready
$('#check').click(display); //onclick checkbox display() will be performed, do not use onchange as you'll get in troubles with IE

function display(){
tab=document.getElementById('tab1');
checkbox=document.getElementById('check')
if (check.checked){
tab.style.display = 'inline';
}
else{
tab.style.display='none';   
}
console.log(tab.style.display)
}
});

或尝试在这里玩http://jsfiddle.net/766Nb/ P.s：在 jsfiddle 上我已经清理了一些 css

Answer 6

对于隐藏元素 li，您需要 tab.style.display='none';，对于显示元素 li，您需要 tab.style.display='list-item';。

那么必要的代码是这样的：

JAVASCRIPT

function llm()
{
        tab = document.getElementById('tab1');
    if (document.getElementById('Check1').checked==false)
    {
        tab.style.display = 'none';
    }
    else
    {
        tab.style.display='list-item';
    }
}

HTML

<input type="checkbox" id="Check1" name="vehicle" value="Car" onclick="LLM();"> Checked
<ul id="tabmenu">       
    <li name='tab' id='tab1' selected='no' status='disabled'></li>      
</ul>

CSS

#tabmenu li[status='disabled'] a, a.active, #disabled { 
    color: #777777; 
    background: #DDDDDD;
    font: normal 1em Arial; 
    border: 1px solid black; 
    border-radius: inherit;
    padding: 0px 5px 0px 5px; 
    margin: 0px; 
    text-decoration: none;
    cursor:hand; 
    display:none;
} 

我认为仅使用 css 是不可能的。如果您需要更多帮助，请通知我。