4

我正在尝试添加一个复选框切换，通过将它们的样式显示属性从“无”更改为“内联”来隐藏和显示列表元素，但它不起作用。我在 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”可以。

4

6 回答 6

2

您的 CSSa在选项卡中隐藏了一个元素，而不是选项卡本身：

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

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

如果您的 CSS 是：

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

然后更改display将很有用。

于 2013-11-13T15:53:30.867 回答
1

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

您可能想将规则更改为

#tabmenu li[status='disabled'], a.active, #disabled {
于 2013-11-13T15:49:37.553 回答
1

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

于 2013-11-13T15:52:35.737 回答
1

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

<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/ Ps：在jsfiddle上我已经清理了一点css

于 2013-11-13T16:15:12.717 回答
0

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

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

.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!importantoverwrite

于 2013-11-13T15:52:03.577 回答
0

For hidde element li you need tab.style.display='none'; and for show element li you need tab.style.display='list-item';.

Then the necessary code it's this:

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

I think it's not possible to do only with css. If you need more help notify me.

于 2013-11-13T16:44:46.433 回答