眼巴巴望着 2023-04-14 16:50 采纳率: 50%
浏览 22
已结题

html求解求解111111

img


怎么实现点一下上面的字就可以切换一个内容，感觉好难，完全看不明白害

  • 写回答

2条回答 默认 最新

  • 乘风xs 2023-04-14 17:22
    关注

    简单来说，给上面的字添加了一个点击事件，在点击事件的响应中，修改了下面的内容
    给你写了一个简单的demo看看

    <!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        #tab span {
            background-color: pink;
            display: inline-block;
            margin: 0 10px;
        }
        #content{
            width: 200px;
            height: 200px;
            border: 1px solid green;
        }
    </style>
</head>
<body>
<div id="kuang_jia">
    <!-- 选项区 -->
 <div id="tab">
     <span>软件1</span>
     <span>软件2</span>
 </div>
 <!-- 内容区 -->
 <div id="content"></div>
</body>
<script type="text/javascript">
    // 获取选项区
    const tab = document.getElementById('tab');
    // 获取内容区
    const content = document.getElementById('content');
    // 给选项区添加点击事件
    tab.addEventListener('click', e => {
        // 点击以后就要更换内容区的内容
        console.log(e)
        content.innerHTML = '内容： ' +  e.target.innerText + '的内容';
    })
</script>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 5月2日
  • 已采纳回答 4月24日
  • 创建了问题 4月14日

悬赏问题

  • ¥15 PointNet++的onnx模型只能使用一次
  • ¥20 西南科技大学数字信号处理
  • ¥15 有两个非常“自以为是”烦人的问题急期待大家解决！
  • ¥30 STM32 INMP441无法读取数据
  • ¥15 R语言绘制密度图，一个密度曲线内fill不同颜色如何实现
  • ¥100 求汇川机器人IRCB300控制器和示教器同版本升级固件文件升级包
  • ¥15 用visualstudio2022创建vue项目后无法启动
  • ¥15 x趋于0时tanx-sinx极限可以拆开算吗
  • ¥500 把面具戴到人脸上，请大家贡献智慧，别用大模型回答，大模型的答案没啥用
  • ¥15 任意一个散点图自己下载其js脚本文件并做成独立的案例页面，不要作在线的，要离线状态。