-2

我想在页面加载时显示 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>
4

4 回答 4

3

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

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

然后你需要设置display值。

element.style.display = "none";

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

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

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

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

于 2013-05-06T18:32:50.110 回答
1

您应该将 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 来执行这些操作，因为它非常优化且易于学习/使用

于 2013-05-06T18:35:19.653 回答
1

演示：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>
于 2013-05-06T18:38:48.420 回答
-1

不使用 jQuery：

document.onload = function() {
    document.getElementById("q1").style.display = "block";
    document.getElementById("q2").style.display = "none";
    document.getElementById("q3").style.display = "none";
};
于 2013-05-06T18:32:40.777 回答