在JavaScript中覆蓋CSS樣式“ display：none”

Question

我正在嘗試添加一個復選框開關，該開關通過將樣式顯示屬性從“無”更改為“內聯”來隱藏和顯示列表元素，但是它不起作用。 我在CSS文件中將屬性的樣式設置為“ display：none”。 然后，當有人選中某個框時，我將其設置為JavaScript中的“ display：inline”。 javascript已成功將元素的屬性更改為inline，但是由於某些原因，該元素仍然不可見。

如果我做相反的事情，通過在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

您已經將li內部的a元素設置為隱藏，因此將標簽設置為可見是不夠的。 將容器（ 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/ ps：在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';

重要提示：使用此解決方案，您可以在CSS上從display:none開始，而后再設置可見對象也沒有問題，因為類上的!important標記會overwrite所有內容，因此隱藏它不會有問題。

Answer 6

對於tab.style.display='none';元素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是不可能的。 如果您需要更多幫助，請通知我。