JavaScript怎么制作该网页

Question

 

Answer 1

如果是使用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我不是很熟悉，图片拖动自行百度一下吧