盐文字 2021-11-06 09:34 采纳率: 80%
浏览 126
已结题

html的题，不怎么会，凑字数凑字数

img


就是如何点击盒子1中的链接，让盒子2中的内容改变(让盒子1中的a或者b链接到盒子2或者盒子3)

  • 写回答

7条回答 默认 最新

  • Stephen_112 2021-11-06 10:53
    关注

    就是一个简单的js问题么，左面放几个button,给button加上事件，点击不同的button，右边显示不同的内容。就这么个效果吧。

    <!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">
    <style>
        .container{
            display: flex;
            flex-direction: row;
        }
        .left{
            width: 30%;
        }
        .left button{
            width: 100px;
            height: 50px;
            font-size: 21px;
        }
        .left div{
            margin-top: 15px;
        }
        .right{
            width: 50%;
            height: 300px;
            background-color: aliceblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            <div>
                <button id="red">red</button>
            </div>
            <div>
                <button id="green">green</button>
            </div>
            <div>
                <button id="blue">blue</button>
            </div>
        </div>
        <div id="right" class="right"></div>
    </div>
</body>
<script>
    document.getElementById('red').addEventListener('click',function(){
        document.getElementById("right").style.backgroundColor = "red";
    });
    document.getElementById('green').addEventListener('click',function(){
        document.getElementById("right").style.backgroundColor = "green";
    });
    document.getElementById('blue').addEventListener('click',function(){
        document.getElementById("right").style.backgroundColor = "blue";
    });
</script>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(6条)

报告相同问题？

问题事件

  • 系统已结题 11月16日
  • 已采纳回答 11月8日
  • 创建了问题 11月6日

悬赏问题

  • ¥20 神经网络Sequential name=sequential, built=False
  • ¥16 Qphython 用xlrd读取excel报错
  • ¥15 单片机学习顺序问题！！
  • ¥15 ikuai客户端多拨vpn，重启总是有个别重拨不上
  • ¥20 关于#anlogic#sdram#的问题，如何解决？(关键词-performance)
  • ¥15 相敏解调 matlab
  • ¥15 求lingo代码和思路
  • ¥15 公交车和无人机协同运输
  • ¥15 stm32代码移植没反应
  • ¥15 matlab基于pde算法图像修复，为什么只能对示例图像有效