我正在尝试添加一个复选框切换,通过将它们的样式显示属性从“无”更改为“内联”来隐藏和显示列表元素,但它不起作用。我在 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(来自命令行,或复选框的 onchange)
tab = document.getElementById('tab1');
tab.style.display = 'inline';
更新:我知道我可以将“显示:无”从 CSS 中移出,并在使用 javascript 加载页面时将其设置为无。但如果我这样做,它将在页面加载后隐藏它们,这意味着,在速度较慢的计算机上,用户可以看到它们短暂地闪烁到可见性中。这就是为什么我使用 css 来设置初始状态,然后在选中或取消选中该框时尝试覆盖它。
更新 2:让我强调一下,如果我将元素设置为在 css 中可见,然后在更改复选框时将其隐藏,则此代码可以正常工作。但是如果元素最初在 css 中设置为不可见,则复选框无法使元素可见。所以看起来是一个问题,页面加载后css“display:none”不能被覆盖,但css“display:inline”可以。