通过js实现选择按钮出现不同内容

5024

于 2018-05-28 17:46:18 发布

阅读量9.5k

点赞数 7

CC 4.0 BY-SA版权

文章标签： js html

本文链接：https://blog.youkuaiyun.com/m0_37771093/article/details/80485638

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现了两个按钮控制不同内容的显示与隐藏功能。通过点击“哥哥”按钮可以显示学生信息并隐藏另一段内容，反之亦然。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<button type="button"  style="color: salmon" onclick=show1()>哥哥</button>
<button type="button"   onclick=show2()>弟弟</button>
<div style="display: block" id="teachers">
I am a students
</div>
    <div style="display: none" id="students">
        I will be better
    </div>



</body>
<script type="text/javascript">
    function show1(){

        document.getElementById("teachers").style.display="block";

        document.getElementById("students").style.display="none";

    }

    function show2(){

        document.getElementById("teachers").style.display="none";

        document.getElementById("students").style.display="block";

    }
</script>
</html>