JavaScript怎么制作该网页

如果是使用frameset，需要5个页面来完成所有的内容，而题目要求一个页面完成，所以我们只能使用 div 的隐藏与显示来完成这个作业，为了实现起来简单一些，我们引入jq和bootstrap，然后使用div布局

<style>
.hover {background:green;}
.hide {display:none;}
.content {flex:1;height:100vh;overflow:auto;}
</style>
<div class="d-flex justify-content-between">
    <div style="width:200px;height:100vh;">
        <div class="box hover">js介绍</div>
        <div class="box">数据</div>
        <div class="box">图片</div>
    </div>
    <div class="content">
        <div>js介绍内容</div>
        <div class="hide"><table><tr><td>....表格内容</td></tr></table></div>
        <div class="hide">
            <img src="..." />...图片内容
        </div>
    </div>
</div>
<script>
$(document).ready(function(){
    $('.box').click(function(){
        $('.box').removeClass('hover')
        $(this).addClass('hover')
        $('.content>div').addClass('hide');
        $('.content>div:eq('+$(this).index()+')').removeClass('hide')
    })
})
</script>

然后，bootstrap我不是很熟悉，图片拖动自行百度一下吧

主要用到一个div的切换功能还有就是div排版

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632