Javascript 如何使HTML页面上的按钮显示不同的信息_Javascript_Html

Javascript 如何使HTML页面上的按钮显示不同的信息

javascript html

Javascript 如何使HTML页面上的按钮显示不同的信息,javascript,html,Javascript,Html,我正在为学校作业制作一个信息网站，我想有一个按钮在页面上显示不同的信息。我如何用HTML或其他适用的语言来实现这一点，谢谢使用JavaScript <body> <input id="button1" type="button" value="click me"> <input id="button2" type="button" value="click me, too"> <p id="output"></p>

我正在为学校作业制作一个信息网站，我想有一个按钮在页面上显示不同的信息。我如何用HTML或其他适用的语言来实现这一点，谢谢使用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>

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

我相信您也可以在CSS中这样做，在示例中要注意的一点是您好选项卡1 你好，选项卡2 你好，选项卡3 你好，选项卡4 你好，第五页

我希望这对你有帮助@lv0gun9你可能是通灵者，因为我永远不会从这件事中得到它question@Jhecht我不擅长英语，我觉得这是一个广泛的问题。因此，我的回答非常简单且偏于局部。@lv0gun9我如何为5篇ect文本实现这个功能？@EllisRourke检查一下。你有网络编程或编写HTML的经验吗？