Question

好的，所以我想创建一个代码，通过单击一个按钮，您可以隐藏一个按钮，然后再显示一个按钮。所有按钮出现并工作但我不知道如何使按钮3和4被隐藏，直到单击按钮一。

    <input type="button" onclick="b()";>no</button>
    <script>
    function a() {
    alert ("button 1")
    }
    function b() {
    alert ("button 2")
    }
     </script>

    <input type="button" onclick="c()";>button 3</button>
    <input type="button" onclick="d()";>button 4</button>
    <script>
    function c() {
      alert ("button 3")
    }
    function d() {
      alert ("button 4")
    }

Answer 1

＆＃13;

function button1Clicked() {
  document.getElementById('3').classList.remove('hidden');
  document.getElementById('4').classList.remove('hidden');
}

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<input type="button" id="1" value="Button 1" onclick="button1Clicked();" />
<input type="button" id="2" value="Button 2" />
<input type="button" id="3" class="hidden" value="Button 3" />
<input type="button" id="4" class="hidden" value="Button 4" />

＆＃13;

通常，您可以将HTML，JS和CSS保存在单独的文件中。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="my.css">
</head>
<body>
    <script type="text/javascript" href="my.js"></script>
    <input type="button" id="1" value="Button 1" onclick="button1Clicked();" />
    <input type="button" id="2" value="Button 2" />
    <input type="button" id="3" class="hidden" value="Button 3" />
    <input type="button" id="4" class="hidden" value="Button 4" />
</body>
</html>

如果您想将所有内容保存在一个文件中，只需将link标记替换为style标记，并将JS保留在script标记中，如下所示：

<style>
    .hidden {
        display: none;
    }
</style>

<script type="text/javascript">
    function button1Clicked() {
        document.getElementById('3').classList.remove('hidden');
        document.getElementById('4').classList.remove('hidden');
    }
</script>

连接按钮

1 个答案: