顯示/隱藏JavaScript的問題

我遇到顯示和隱藏兩個div的問題。我有兩個鏈接：「寫郵件」和「發送郵件」。出於某種原因，爲了讓div出現，我必須點擊鏈接兩次。我認爲這可能是我在試圖在頁面加載之前點擊它，但那並沒有解決問題。在頁面加載時，div設置爲display:none，然後使用JS修改樣式屬性。您可以查看問題here 顯示/隱藏JavaScript的問題

這裏是我的JavaScript代碼：

<script type="text/javascript" /> 
    function showPost(id) { 
if(document.getElementById('post').style.display == 'block' && id == 'send') { 
    document.getElementById('post').style.display = 'none'; 
    document.getElementById(id).style.display = 'block'; 
} 
else if(document.getElementById('send').style.display == 'block' && id == 'post') { 
    document.getElementById('send').style.display = 'none'; 
    document.getElementById(id).style.display = 'block'; 
} 
else if(document.getElementById(id).style.display == 'none') { 
    document.getElementById(id).style.display = 'block'; 
} 
else { 
    document.getElementById(id).style.display = 'none'; 
} 
    } 
    </script>

謝謝！

來源

2012-08-09 Matt Altepeter

您是否使用內聯樣式（'style =「display：block;」'）來初始樣式化元素？因爲那是'node.style.display'將要測試你的'if'條件的地方。 – 2012-08-09 13:28:41

不，我正在使用CSS。它只會檢查第一次運行嗎？因爲一旦我點擊了兩次，它就完美了。 – 2012-08-09 13:30:47

我真的不確定爲什麼它會在第二次點擊後生效。你可以發佈一個演示，[JS小提琴]（http://jsfiddle.net/），[JS斌]（http://jsbin.com）或類似的，向我們展示了我們可以在什麼環境中發生的事情操縱和糾正代碼？ – 2012-08-09 13:32:21

post和send元素在加載時似乎沒有樣式屬性。它只在css中有display:none沒有幫助，它需要應用於元素本身。

將style="display:none;"添加到這兩個元素將解決您的問題。

<div id="post" style="display: none;"> 
<div id="send" style="display: none;">

來源

2012-08-09 13:33:04 CalabiYau

謝謝！完美工作。 – 2012-08-09 13:44:07

由於您使用CSS，我不認爲element.style.display正在查找與該元素相關聯的樣式。因此，我相信在第一次點擊時，您的功能默認爲else條件，從而將單擊的元素的顯示樣式設置爲「無」。這意味着在第二次點擊時，會遇到第一個條件之一，然後您的功能將正常工作。嘗試使用您的樣式內嵌:)

來源

2012-08-09 13:34:38 vdelricco

刪除「顯示：無」從style.css的

#post, #send { 
width: 166.5%; 
height: 195px; 
border: 3px solid #DDD; 
background: #E7EBF2; 
margin-left: -67%; 
margin-top: -107px; 
/*display: none;*/ 
}

而在你的HTML添加style="display:none"爲div的（後併發送）

<div id="post">到<div id="post" style="display:none">

<div id="send">到<div id="send" style="display:none">

來源

2012-08-09 13:34:53

document.getElementById（'post'）。styl e.display/document.getElementById（'send'）。style.display返回空字符串，因此else條件是第一次執行。

來源

2012-08-09 13:36:23 Shab

顯示/隱藏JavaScript的問題

回答

相關問題