html点击文字切换div（js）（适用于切换较少）

是小六儿呀

已于 2023-05-13 23:02:11 修改

阅读量1.1k

点赞数 1

文章标签： html javascript css

于 2023-05-12 21:45:49 首次发布

本文链接：https://blog.csdn.net/weixin_58243276/article/details/130650652

版权

用js的hide()和show()函数进行切换

js尽量写在html里，因为我写在外部失败了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.6.4.js"></script>
    <script>
        //这里我用了四个show（）和hide（）的函数，不适合div多的
            $(document).ready(function () {    //点击id为div1的标签，运行函数使其他图层隐藏
                $("#div1").click(function () {
                    $(".div1").show();
                    $(".div2").hide();
                    $(".div4").hide();
                    $(".div3").hide();
                });
            });
            $(document).ready(function () {
                $("#div2").click(function () {
                    $(".div2").show();
                    $(".div1").hide();
                    $(".div4").hide();
                    $(".div3").hide();
                });
            });
            $(document).ready(function () {
                $("#div3").click(function () {
                    $(".div3").show();
                    $(".div4").hide();
                    $(".div2").hide();
                    $(".div1").hide();
                });
            });
            $(document).ready(function () {
                $("#div4").click(function () {
                    $(".div4").show();
                    $(".div3").hide();
                    $(".div2").hide();
                    $(".div1").hide();
                });
            });
    </script>
</head>
<body>   //设置四个button按钮，点击运行
<button id="div1" >div1</button></button>

<button id="div2">div2</button></button>

<button id="div3">div3</button></button>

<button id="div4">div4</button></button>
<div class="div1" style="display: none"><h1>作答要求1</h1></div>

<div class="div2" style="display: block;"><h1>作答要求2</h1></div>
    
<div class="div3" style="display: none"><h1>作答要求3</h1></div>
    
<div class="div4" style="display:none"><h1>查询各科成绩</h1></div>
    
</body>

</html>