[英]Overriding CSS style 'display:none' in javascript
I'm trying to add a checkbox toggle that hides and shows list elements by changing their style display attribute from "none" to "inline", but it's not working. 我正在尝试添加一个复选框开关,该开关通过将样式显示属性从“无”更改为“内联”来隐藏和显示列表元素,但是它不起作用。 I'm setting the attribute's style to "display:none" in the CSS file.
我在CSS文件中将属性的样式设置为“ display:none”。 Then I set it to "display:inline" in javascript when someone checks a box.
然后,当有人选中某个框时,我将其设置为JavaScript中的“ display:inline”。 The javascript is successfully changing the element's property to inline, but for some reason the element remains invisible.
javascript已成功将元素的属性更改为inline,但是由于某些原因,该元素仍然不可见。
If I do the opposite, by setting the display to inline in the CSS and overriding it to none in the javascript, it works fine. 如果我做相反的事情,通过在CSS中将显示设置为内联并在javascript中将其覆盖为无,则可以正常工作。 I don't see why this would work one way but not the other.
我不明白为什么这会以一种方式起作用,而不能以另一种方式起作用。
I'm using chrome. 我正在使用Chrome。 Here is the code.
这是代码。 Any feedback is appreciated.
任何反馈表示赞赏。
CSS file: 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: HTML:
<ul id="tabmenu">
<li name='tab' id='tab1' selected='no' status='disabled'></li>
</ul>
JAVASCRIPT (from command line, or onchange of a checkbox) JAVASCRIPT(从命令行或选中复选框时)
tab = document.getElementById('tab1');
tab.style.display = 'inline';
UPDATE: I know that I could just move the "display: none" out of the css and have it set to none on page load with javascript. 更新:我知道我可以将“ display:none”移出CSS,并在使用javascript加载页面时将其设置为none。 But if I do it that way, it will be hiding them after page load, which means, on slower computers, the user could see them flash briefly into visibility.
但是,如果我这样做,它将在页面加载后将它们隐藏起来,这意味着,在速度较慢的计算机上,用户可能会看到它们短暂地闪烁以显示可见性。 That's why I'm using css to set the initial state, then trying to override it when the box is checked or unchecked.
这就是为什么我使用CSS设置初始状态,然后在选中或未选中该框时尝试覆盖它的原因。
UPDATE 2: Let me emphasize that if I set the element to visible in css, then hide it on change of the check box, this code works fine. 更新2:让我强调一下,如果将元素设置为在CSS中可见,然后在更改复选框时将其隐藏,则此代码可以正常工作。 But if the element is initially set to invisible in css, the checkbox is not able to make the element visible.
但是,如果元素最初在css中设置为不可见,则该复选框无法使该元素可见。 So it appears to be a problem where css "display: none" can't be overridden after page load, but css "display: inline" can.
因此,这似乎是一个问题,即页面加载后无法覆盖css“ display:none”,但可以覆盖css“ display:inline”。
Your CSS is hiding an a
element within the tab, not the tab itself: 您的CSS在选项卡中隐藏了
a
元素,而不是选项卡本身:
#tabmenu li[status='disabled'] a {
}
Changing the tab's style won't undo that. 更改标签的样式不会撤消该操作。
If your CSS was instead: 如果您的CSS是:
#tabmenu li[status='disabled'], a.active, #disabled {
...
}
then changing the display
would be useful. 那么更改
display
会很有用。
You've set the a
element inside the li
to be hidden, so setting the tab to be visible isn't enough. 您已经将
li
内部的a
元素设置为隐藏,因此将标签设置为可见是不够的。 Setting the container (the li
) visible won't make the content (the a
) visible. 将容器(
li
)设置为可见将不会使内容( a
)可见。
You probably want to change your rule to 您可能想将规则更改为
#tabmenu li[status='disabled'], a.active, #disabled {
CSS目标<a>
标签已隐藏,javascript正在更改<li>
,子级<a>
仍将隐藏
you should have function that will check state of a checkbox I've added it to markup 您应该具有可以检查复选框状态的功能,我已将其添加到标记中
<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>
Then next code will check the state of your checkbox and will change visibility of tab 然后下一个代码将检查您的复选框的状态,并将更改选项卡的可见性
$(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)
}
});
Or try to play here http://jsfiddle.net/766Nb/ Ps: on jsfiddle I've cleaned up css a bit 或者尝试在这里播放http://jsfiddle.net/766Nb/ ps:在jsfiddle上,我已经清理了一些CSS
Look this way, maybe you can solve your problem using these steps: 这样看,也许您可以使用以下步骤解决您的问题:
Create a .visible
class on the css with this code: 使用以下代码在CSS上创建一个
.visible
类:
.visible {
display: inline !important;
}
And create another class .hidden
: 并创建另一个类
.hidden
:
.hidden {
display: none !important;
}
And then, use this code to Hide
your element: 然后,使用以下代码
Hide
您的元素:
tab = document.getElementById('tab1');
tab.className = 'hidden';
And this code to Show
your element: 这段代码
Show
您的元素:
tab = document.getElementById('tab1');
tab.className = 'visible';
Important: with this solution you can start with display:none
on the CSS
without having problems to set visible after, because the !important
tag on the classes overwrite
all, so you will not have problem to hide it. 重要提示:使用此解决方案,您可以在
CSS
上从display:none
开始,而后再设置可见对象也没有问题,因为类上的!important
标记会overwrite
所有内容,因此隐藏它不会有问题。
For hidde element li you need tab.style.display='none';
对于
tab.style.display='none';
元素li,您需要tab.style.display='none';
and for show element li you need tab.style.display='list-item';
对于显示元素li,您需要
tab.style.display='list-item';
. 。
Then the necessary code it's this: 然后必要的代码是这样的:
JAVASCRIPT JAVASCRIPT
function llm()
{
tab = document.getElementById('tab1');
if (document.getElementById('Check1').checked==false)
{
tab.style.display = 'none';
}
else
{
tab.style.display='list-item';
}
}
HTML 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 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;
}
I think it's not possible to do only with css. 我认为仅使用CSS是不可能的。 If you need more help notify me.
如果您需要更多帮助,请通知我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.