正確的隱藏HTML內容的方法

我在寫一個小的HTML + JavaScript（所以可以調用）應用程序。用戶有兩種選擇（單選按鈕），並根據他選擇的內容，在選擇單選按鈕下顯示內容「A」或內容「B」。正確的隱藏HTML內容的方法

現在我想知道什麼是正確的方式來處理這個內容。我應該有2個DIV，根據選擇，只有一個可見，或者我應該使用JavaScript將InnerHTML寫入單個div，具體取決於單選按鈕的狀態。這是一個小的「計算」應用程序，因此不會提交表單數據。

感謝您的回覆！ J

2010-10-13 jpou

您可以使用：

.myDivHidden 
{ 
    display: none; 
} 

.myDiv 
{ 
    display: block; 
} 

<div id="myDiv"> 
    Content 
</div>

或

.myDivInvisible 
{ 
    visibility: hidden; 
} 
.myDivVisible 
{ 
    visibility: visible; 
} 

<div id="myDiv"> 
    Content 
</div>

不同的是，display: none;會導致元件從可見的屏幕上消失，就好像它是不是即使在那裏，而visibility: hidden;會引起元素從視圖中消失但仍佔用空間，其他元素不會像使用display: none;那樣移入空白區域。

然後你就可以使用JavaScript交換方式：

if (radio button check goes here) 
{ 
    document.getElementById('myDiv').className = className; // display or visibility 
} 
else 
{ 
    document.getElementById('myDiv').className = className; // display or visibility 
}

只是交換根據該方法的知名度類，你會更喜歡使用

來源

2010-10-13 22:43:05

使用兩個div，都屬於包含display: none規則的CSS類。然後，當用戶選擇一個選項時，在要顯示的div上覆蓋該CSS，並撤銷對您不想顯示的內容的覆蓋。例如，如果用戶選擇選項1：

div1.style.display = 'block'; 
div2.style.display = '';

來源

2010-10-13 22:33:34 PleaseStand

最好是有2個div並顯示需要顯示的那個。動態地編寫內容使得設計它變得非常困難並且沒有帶來真正的價值。

來源

2010-10-13 22:34:17 Vinzenz

使用2個div。將HTML嵌入到Javascript中很難看，因此難以佈置頁面。

來源

2010-10-13 22:34:29 Daveo

使用兩個div，然後使用display: none;爲div隱藏。

來源

2010-10-13 22:36:18

正確的隱藏HTML內容的方法

回答

相關問題