Question

好吧，经过一小时的javascript介绍，我提出了以下代码。它做了我想要的事情，但后来我想要别的东西而且它不会工作。

我希望点击一个按钮，某个字段会隐藏，然后点击另一个是，另一个也会隐藏，但是，当然，它必须进行另一个节目，否则我们最终会无所事事并且目的是根据用户点击的内容（在单选按钮上）显示不同的字段。所以以幼稚的方式我制作了我的代码并且它有效。但后来我发现我首先要隐藏两个字段而不是显示两个字段，这就是问题所在。我在函数“告诉它”的参数中添加了一个0值，当x = 0时，则visibility = hidden。但它不会听我的！所以，当代码x = 1和2时，代码的一部分工作，一个约为0，不会。

这是一个简单的代码，可以让某人微笑，但是，它很干净，而且很有效。有没有人知道如何在点击按钮之前隐藏字段？

非常感谢我删除了一些HTML标签

<html>
    <head>
        <script language="javascript">
            var x = 0;

            function hola(x) {
                if(x == 0) {
                    document.getElementById("cont1").style.visibility="hidden";
                    document.getElementById("cont2").style.visibility="hidden";
                }

                if(x == 1) {
                    document.getElementById("cont1").style.visibility="visible";
                    document.getElementById("cont2").style.visibility="hidden"; 
                }

                if(x == 2)  {
                    document.getElementById("cont1").style.visibility="hidden";
                    document.getElementById("cont2").style.visibility="visible"; 
                }
            }
        </script>
    </head>

    <body>
        <input type="button" onclick="hola(1)" value="hidefield2" id="boton1">
        <div id="cont1">
            <input type="text">
        </div>

        <input type="button" onclick="hola(2)" value="hidefield1" id="boton2">

        <div id="cont2">
            <input type="text">
        </div>
    </body>
<html>

Answer 1

工作：
你有两个按钮，两个按钮都在开头可见。点击一个按钮，你隐藏了一个div，并使另一个可见。

现在你需要一种情况，当div应该隐藏在开头，然后在你点击按钮时显示。

默认情况下，对于未提供明确visibility属性的所有元素，visibility被视为visible。

要使按钮不可见，您需要将visibility:hidden添加到按钮。

你可以用两种方式做到：

在div的代码中，通过添加使“默认情况下不可见” style='visibility:hidden'。

添加另一个在加载页面时调用的javascript函数，并使两个div都不可见：

function hideBoth()  
{  
   document.getElementById("cont1").style.visibility="hidden";  
   document.getElementById("cont2").style.visibility="hidden" ;   
}

在加载页面时调用它：<body onload='hideBoth()'>

Answer 2

这一行：

document.getElementById("cont1").style.visibility="hidden";

添加：

style="visibility: hidden;"

到此：

<div id="cont1">

使它看起来像这样：

<div id="cont1" style="visibility: hidden;">

您可以自己执行此操作，只需将该属性添加到html标记即可。

哦，是的，而且：

<div id="cont1">

与此相同：

<div id="cont1" style="visibility: visible;">

Answer 3

您也可以使用jquery来做到这一点！这是一个示例，该示例基本上接受CSS的输入并使其可见或不可见：

function checkPrerequisites() {
  // The 4th line makes objects visible in the for loop.
  // Determines if pre-requisites are met and if so - makes div draggable
  // for new courses 

  for (var i = 0; i < courselist.length; i++) {
    if (prerequisitesMet(i)) {
      $('#' + i.toString()).css("background-color", "lightgreen");
      $('#' + i.toString()).css("visibility", "visible");
      $('#' + i.toString()).draggable();
    }
  }
}

条件显示html元素表单

3 个答案: