Question

我正在为学校作业创建一个信息网站，我想要一个按钮，以便在页面上显示不同的信息。我如何用HTML或其他适用语言进行此操作，谢谢

Answer 1

使用JavaScript！

<body>
    <input id="button1" type="button" value="click me">
    <input id="button2" type="button" value="click me, too">
    <p id="output"></p>

    <script>
        /* Get references to your elements. */
        var button1=document.getElementById("button1");
        var button2=document.getElementById("button2");
        var output=document.getElementById("output");

        /* Add click event listeners to your buttons so you can interact with them. */
        button1.addEventListener("click",clickButton1);
        button2.addEventListener("click",clickButton2);

        /* Write functions to handle displaying various content depending on which button you press. */
        function clickButton1(event_){
            output.innerHTML="You clicked button1!";
        }

        function clickButton2(event_){
            output.innerHTML="You clicked button2!";
        }
    </script>
</body>

基本上，您的click事件侦听器会处理按下按钮时要显示的内容。我只是在p元素中更改文本，但你可以做更多的事情。例如，存储要在隐藏div中显示的不同html，并仅在按下按钮时显示它们。希望这有帮助！

Answer 2

我相信您也可以在CSS中执行此操作，示例中需要注意的重点是每个<a>在href属性中都有#(id of div)。由于我不知道你的困境的确切背景，我不能说这会按照你想要的方式工作，但我真的不喜欢使用javascript，如果我不必要的话。

＆＃13;

.container > div {
  display: none
}
.container > div:target {
  display: block;
}
ul.nav {
  list-style-type: none;
}
ul li {
  display: inline-block;
  width: 100px;
}
ul li button {
  border: 1px solid grey;
  border-radius: 2px;
  padding-left: 5px;
  box-sizing: padding-box;
}

＆＃13;

<ul class="nav">
  <li>
    <button><a href="#firstTab">Tab 1</a>
    </button>
  </li>
  <li>
    <button><a href="#secondTab">Tab 2</a>
    </button>
  </li>
  <li>
    <button><a href="#thirdTab">Tab 3</a>
    </button>
  </li>
  <li>
    <button><a href="#fourthTab">Tab 4</a>
    </button>
  </li>
  <li>
    <button><a href="#fifthTab">Tab 5</a>
    </button>
  </li>
</ul>
<div class="container">
  <div id="firstTab">Hello Tab 1</div>
  <div id="secondTab">Hello Tab 2</div>
  <div id="thirdTab">Hello Tab 3</div>
  <div id="fourthTab">Hello Tab 4</div>
  <div id="fifthTab">Hello Fifth Tab</div>
</div>

＆＃13;

如何在HTML页面上创建按钮显示不同的信息

2 个答案: