Question

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

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

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

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';

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

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

Answer 1

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

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

更改标签的样式不会撤消。

如果您的CSS改为：

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

然后更改display将非常有用。

Answer 2

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

您可能希望将规则更改为

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

Answer 3

CSS定位隐藏<a>个标签，javascript正在更改<li>，孩子<a>仍然会被隐藏

Answer 4

你应该有一个函数来检查我已经将它添加到标记的复选框的状态

<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 5

这样看，也许你可以使用以下步骤解决问题：

使用以下代码在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';

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

Answer 6

对于hidde元素li，您需要tab.style.display='none';，而对于show element 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做。如果您需要更多帮助通知我。

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

6 个答案: