CSS樣式可見性沒有像預期的那樣運行

我有一個帶有基本選項卡控件的html頁面。我使用JavaScript來顯示和隱藏標籤和標籤內容div。我的問題是，如果我將其中一個標籤內容div內的某個元素的可見性更改爲'hidden'，然後回到'visible'，該元素似乎會忘記或丟失其父容器並保持可見狀態，而不管它的原始內容家長知名度。CSS樣式可見性沒有像預期的那樣運行

爲了說明，看看下面的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<script type="text/javascript"> 
    function hideTab(){ 
     document.getElementById('tab1').style.visibility = 'hidden' 
    } 
    function showTab(){ 
     document.getElementById('tab1').style.visibility = 'visible' 
    } 
    function hideContent(){ 
     document.getElementById('tc1').style.visibility = 'hidden' 
    } 
    function showContent(){ 
     document.getElementById('tc1').style.visibility = 'visible' 
    } 
</script> 
</head> 
<body> 
    <a href="javascript: hideTab()">Hide Tab</a><br /> 
    <a href="javascript: showTab()">Show Tab</a><br /> 
    <a href="javascript: hideContent()">Hide Content</a><br /> 
    <a href="javascript: showContent()">Show Content</a><br /><br /> 
    <div id="tab1" style="background:yellow;width:100px"> 
     <div id='tc1'>Content Text</div> 
    </div> 
</body> 
</html>

在IE8中單擊「隱藏選項卡」，然後「顯示選項卡」這一工程確定。在顯示的標籤中點擊「隱藏內容」，然後「顯示內容」這也是正確的。現在再次點擊'隱藏標籤'，你會看到標籤消失，但內容不正確。

在IE8中，當我使用兼容模式問題消失。另外，我注意到如果我刪除DOCTYPE元素，我不能複製這個問題。

在Chrome中（我個人最喜歡的）問題，無論DOCTYPE元素的是持久的。我沒有嘗試過這個在Firefox中。

我敢肯定有一個很好的理由爲這種行爲，我也肯定會有一個簡單的解決方案，我讓我的標籤正常工作。我期待你的評論。

來源

2010-01-21 SausageFingers

這是因爲CSS屬性「可見性」是繼承的，但不影響頁面的佈局。因此，如果您設置要隱藏的元素，除非您明確地使其可見（指定visibility: visible）。

，必須重置CSS屬性繼承得到你想要的行爲。 visibility: inherit

編輯或者，如JavaScript：您可以通過使用inherit關鍵字的值這麼做

element.style.visiblity = 'inherit';

來源

2010-01-21 20:46:24 zneak

zneak - 非常感謝，這解決了我的問題。正如您所建議的那樣，我在將每個元素設置爲「繼承」後，將其更改爲「可見」，並且問題得到解決。謝謝。 – SausageFingers 2010-01-21 22:04:48

相反的子元素的可見性設置爲「可見」，它設置爲「繼承」 - 那麼它會聽從父母的可見性設置獨立覆蓋它來代替。

來源

2010-01-21 20:45:02

我認爲你的例子被簡化，並在您的實際代碼您有多個選項卡。在這種情況下，我很驚訝發佈的答案爲你工作。你不想在返回到tab1時保留tc1的可見性嗎？如果你這樣做，然後堅持原來的想法，但修改標籤的功能，如下所示：

function hideTab(){ 
    document.getElementById('tab1').style.display = 'none' 
} 
function showTab(){ 
    document.getElementById('tab1').style.display = 'block' 
}

注意，我修改父DIV顯示屬性 - 不可見性屬性。

來源

2010-12-12 21:56:22

CSS樣式可見性沒有像預期的那樣運行

回答

相關問題