weaknesss 2021-08-26 14:35 采纳率: 66.7%
浏览 53
已结题

html中函数不起作用 ，想实现点击按钮显示对应内容


<li οnclick=show1()>
                <a class="img"><img src="images/icon1.png"><span>门诊信息管理</span></a>
                </li>
                <li οnclick=show2()>
                <a class="img"><img src="images/icon2.png"><span>实验室信息管理</span></a>
                </li>
                <li οnclick=show3()>
                <a class="img"><img src="images/icon3.png"><span>检验信息管理</span></a>
                </li>
                <li>


<div class="Aboxa 1">
            <div class="h6">门诊信息管理系统</div>
            <div class="p"></div>
            <div class="images"><p><img src=""></p></div>
            </div>
            <div class="Aboxa 2">
                <div class="h6">实验室信息管理系统</div>
                <div class="p"></div>
                <div class="images"><p><img src=""></p></div>
                </div>
            <div class="Aboxa 3">
                <div class="h6">检验信息管理系统</div>
                <div class="p"></div>
                <div class="images"><p><img src=""></p></div>
                </div>
        </div>



<script>
     function show1(){
        document.getElementsByClassName("Abox 1").style.display="block";
        document.getElementsByClassName("Abox 2").style.display="none";
        document.getElementsByClassName("Abox 3").style.display="none";
    }

    function show2(){
        document.getElementsByClassName("Abox 1").style.display="none";
        document.getElementsByClassName("Abox 2").style.display="block";
        document.getElementsByClassName("Abox 3").style.display="none";

    }
    function show3(){
        document.getElementsByClassName("Abox 1").style.display="none";
        document.getElementsByClassName("Abox 2").style.display="none";
        document.getElementsByClassName("Abox 3").style.display="block";
    }
</script>

想要实现点击

  • 里的内容显示对应介绍，以上代码请问哪里有问题？

  • 写回答

5条回答 默认 最新

  • Yehger 2021-08-26 14:59
    关注
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="c" onclick="show1()">
        <a class="img"><img src="images/icon1.png"><span>门诊信息管理</span></a>
    </button>
    <button id="b" onclick="show2()">
        <a class="img"><img src="images/icon2.png"><span>实验室信息管理</span></a>
    </button>
    <button onclick="show3()">
        <a class="img"><img src="images/icon3.png"><span>检验信息管理</span></a>
    </button>
    <li>

        <div class="Aboxa 1">
            <div class="h6">门诊信息管理系统</div>
            <div class="p"></div>
            <div class="images">
                <p><img src=""></p>
            </div>
        </div>
        <div class="Aboxa 2">
            <div class="h6">实验室信息管理系统</div>
            <div class="p"></div>
            <div class="images">
                <p><img src=""></p>
            </div>
        </div>
        <div class="Aboxa 3">
            <div class="h6">检验信息管理系统</div>
            <div class="p"></div>
            <div class="images">
                <p><img src=""></p>
            </div>
        </div>
        </div>

        <script>
            function show1() {
                document.getElementsByClassName("Aboxa 1")[0].style.display = "block";
                document.getElementsByClassName("Aboxa 2")[0].style.display = "none";
                document.getElementsByClassName("Aboxa 3")[0].style.display = "none";
            }
            function show2() {
                document.getElementsByClassName("Aboxa 1")[0].style.display = "none";
                document.getElementsByClassName("Aboxa 2")[0].style.display = "block";
                document.getElementsByClassName("Aboxa 3")[0].style.display = "none";
            }
            function show3() {
                document.getElementsByClassName("Aboxa 1")[0].style.display = "none";
                document.getElementsByClassName("Aboxa 2")[0].style.display = "none";
                document.getElementsByClassName("Aboxa 3")[0].style.display = "block";
            }
        </script>
</body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题？

问题事件

  • 系统已结题 9月3日
  • 已采纳回答 8月26日
  • 创建了问题 8月26日

悬赏问题

  • ¥20 SpringBoot+Vue3
  • ¥15 高额悬赏~绕过防火墙被针对了
  • ¥15 IT从业者的调查问卷
  • ¥65 LineageOs-21.0系统编译问题
  • ¥30 关于#c++#的问题，请各位专家解答！
  • ¥15 App的会员连续扣费
  • ¥15 不同数据类型的特征融合应该怎么做
  • ¥15 用proteus软件设计一个基于8086微处理器的简易温度计
  • ¥15 用联想小新14Pro
  • ¥15 multisim中关于74ls192n和DSWPK开关仿真图分析（减法计数器）