Question

我想在页面加载时显示ID为“q1”的DIV，同时隐藏div“q2”和“q3。我的代码在下面，检查是/否按钮后，想要显示div”q2“或根据回应div“q3”。

我如何使用javascript执行此操作？非常感谢。

<div id="q1">
<p>1. Do you like red?</p>

<div class="checkArea">
              <label><INPUT type="radio" id="q1Yes" name="q1A" value="Yes"/>
              Yes</label><br>

              <label><INPUT type="radio" id="q1No" name="q1A" value="No"/>
              No</label>
</div>

<div id="q2">
<p>2. Do you like green?</p>

<div class="checkArea">
              <label><INPUT type="radio" id="q2Yes" name="q2A" value="Yes" />
              Yes</label><br>

              <label><INPUT type="radio" id="q2No" name="q2A" value="No" />
              No</label>
</div>

<div id="q3">
<p>3. Do you like dessert?</p>

<div class="checkArea">
              <label><INPUT type="radio" id="q3Yes" name="q3A" value="Yes" />
              Yes</label><br>

              <label><INPUT type="radio" id="q3No" name="q3A" value="No" />
              No</label>
</div>

Answer 1

使用纯Javascript，首先需要获取元素。

var element = document.getElementById('q1');

然后您需要设置display值。

element.style.display = "none";

要再次显示它们，您只需将值设置为之前的设置即可。例如：

element.style.display = "block"; // if it was block.

这会隐藏元素。这会将其隐藏在页面中，但不会将其从DOM中删除。

我不打算给你代码;更有意义的是教你原则，你可以自己解决，否则没有人真正学到任何东西！

Answer 2

你应该使用jQuery进行这些操作：

http://jquery.com

在您的<head></head>代码中添加脚本，然后

你可以通过添加这个CSS代码来隐藏q2和q3：

#q2, #q3 { display: none }

当你想用jquery库显示它们时：

$("#q2").show(); // where q2 is the id of your div
// or
$("#q1").hide(); // to hide the element

我强烈建议使用jquery来执行这些操作，因为它非常优化且易于学习/使用

Answer 3

DEMO：http://jsfiddle.net/abc123/4W7JT/

JS：

<script language=javascript type='text/javascript'> 
function hideDiv(id) { 
    if (document.getElementById) 
    { // DOM3 = IE5, NS6 
        document.getElementById(id).style.visibility = 'hidden'; 
    } 
    else 
    { 
        if (document.layers) { // Netscape 4 
            document.id.visibility = 'hidden'; 
        }    
        else { // IE 4 
        document.all.id.style.visibility = 'hidden'; 
        } 
    } 
}

function showDiv(id) { 
    if (document.getElementById) { // DOM3 = IE5, NS6 
        document.getElementById(id).style.visibility = 'visible'; 
    } 
    else { 
        if (document.layers) { // Netscape 4 
            document.id.visibility = 'visible'; 
        } 
        else { // IE 4 
            document.all.id.style.visibility = 'visible'; 
        } 
    } 
} 
</script>

HTML：

<body onload="javascript:hideDiv('q2');hideDiv('q3');">
    <div id="q1">
<p>1. Do you like red?</p>

<div class="checkArea">
              <label><INPUT type="radio" id="q1Yes" name="q1A" value="Yes" onchange="javascript:showDiv('q2');hideDiv('q3');"/>
              Yes</label><br>

              <label><INPUT type="radio" id="q1No" name="q1A" value="No" onchange="javascript:showDiv('q3');hideDiv('q2');"/>
              No</label>
</div>

<div id="q2">
<p>2. Do you like green?</p>

<div class="checkArea">
              <label><INPUT type="radio" id="q2Yes" name="q2A" value="Yes" />
              Yes</label><br>

              <label><INPUT type="radio" id="q2No" name="q2A" value="No" />
              No</label>
</div>

<div id="q3">
<p>3. Do you like dessert?</p>

<div class="checkArea">
              <label><INPUT type="radio" id="q3Yes" name="q3A" value="Yes" />
              Yes</label><br>

              <label><INPUT type="radio" id="q3No" name="q3A" value="No" />
              No</label>
</div>
</body>

Answer 4

不使用jQuery：

document.onload = function() {
    document.getElementById("q1").style.display = "block";
    document.getElementById("q2").style.display = "none";
    document.getElementById("q3").style.display = "none";
};

新手 - 如何使用javascript隐藏和显示div？

4 个答案: