Question

我正在编写一个小的HTML + JavaScript（以便调用）应用程序。用户有两种选择（单选按钮），根据他的选择，我在选择单选按钮下显示内容“A”或内容“B”。

现在我想知道处理这些内容的正确方法是什么。我应该有2个DIV，只有一个可见，取决于选择，或者我应该使用JavaScript将InnerHTML写入单个div，具体取决于单选按钮的状态。这是一个小型的“计算”应用程序，因此不会提交表格数据。

感谢您的回复！ Ĵ

Answer 1

您可以使用：

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

只需根据您希望使用的方法交换可见性类

Answer 2

使用两个div，它们都属于包含display: none规则的CSS类。然后，当用户选择一个选项时，覆盖要显示的div上的CSS，并撤消您不想显示的覆盖。例如，如果用户选择选项1：

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

Answer 3

最好有2个div并显示需要显示的那个。动态地编写内容使得设计它变得太难并且没有带来真正的价值。

Answer 4

使用2个div。将HTML嵌入到Javascript中是很难看的，因此很难对页面进行布局。

Answer 5

使用两个div，然后使用display: none;将div隐藏。

隐藏HTML内容的正确方法

5 个答案: