至于web前端开发中网页设计框架的问题

我不知道用什么框架做这样的网页，用div标记要使图片与文字作为一个菜单，用a标记不能使菜单变大，求解当点击左侧的菜单，右侧内容变化。

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

搜索 JQuery标签页效果

img

你题目的解答代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        
        .menu{
            float: left;
            width: 210px;
        }
 
        .menu ul{
            list-style:none;
        }
 
        .menu ul li{
            cursor: pointer;
            margin: 5px 0px;
        }
        .menu ul li img{
            vertical-align: middle;
            border: 1px solid #999;
        }
        .menu .text {
            vertical-align: middle;
            display: inline-block;
            width: 150px;
            height: 40px;
            line-height: 40px;
            background: #999;
            color: #fff;
            padding-left: 15px;
        }
 
        .menu ul li:hover .text{
            background: #f66;
            color: #fff;
        }
        .menu ul li.act .text{
            background: #f00;
            color: #fff;
        }
 
        .info{
            float: left;
            width: 650px;
            padding:15px;
        }
 
 
    </style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
    <div class='menu'>
        <ul>
            <li class="act"><img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/386478668256125.png?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit" alt="" /><span class="text">文字</span></li>
            <li><img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/015029668256121.png?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit" alt="" /><span class="text">文字</span></li>
            <li><img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/685309668256144.png?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit" alt="" /><span class="text">文字</span></li>
            <li><img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/460239668256143.png?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit" alt="" /><span class="text">文字</span></li>
            <li><img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/975649668256184.png?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit" alt="" /><span class="text">文字</span></li>
            <li><img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/689269668256177.png?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit" alt="" /><span class="text">文字</span></li>
            <li><img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/607759668256115.png?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit" alt="" /><span class="text">文字</span></li>
            <li><img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/235679668256189.png?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit" alt="" /><span class="text">文字</span></li>
        </ul>   
    </div>
 
    <div class='info'>
        <div>
            <img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/992079668256190.png?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit" alt="" />
            <img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/437189668256163.png?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit" alt="" />
            <img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/159989668256184.png?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit" alt="" />
            <img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/953899668256156.png?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit" alt="" />
            <img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/882500768256193.png?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit" alt="" />
            <img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/725958668256182.png?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit" alt="" />
        </div>
        <div style="display: none;">222222</div>
        <div style="display: none;">333333</div>
        <div style="display: none;">444444</div>
        <div style="display: none;">555555</div>
        <div style="display: none;">666666</div>
        <div style="display: none;">777777</div>
        <div style="display: none;">888888</div>
    </div>
</body>
<script>
 
$('.menu li').click(function(){
    $('.menu li').removeClass("act");
    $(this).addClass("act");
    var idx=$(this).index('.menu li');
    var d = $('.info>div');
    d.hide();
    d.eq(idx).show();
});
</script>
</html>

1.采用左右侧布局方式，右边内容可以放一个iframe，当点击左侧内容时，切换右侧iframe地址

视频教程
https://m.baidu.com/video/page?pd=video_page&nid=15237122824887989173&sign=12510130104135418454&word=%E5%B7%A6%E4%BE%A7%E8%8F%9C%E5%8D%95%E5%8F%B3%E4%BE%A7%E5%86%85%E5%AE%B9&oword=%E5%B7%A6%E4%BE%A7%E8%8F%9C%E5%8D%95%E5%8F%B3%E4%BE%A7%E5%86%85%E5%AE%B9&atn=index&frsrcid=4185&ext=%7B%22jsy%22%3A1%7D&top=%7B%22sfhs%22%3A1%2C%22_hold%22%3A2%7D&sl=4&fr0=A&fr1=A&ms=1&lid=12831329104579142538&referlid=12831329104579142538&frorder=6&_t=1652868846040

不就是一个简单的tab切换吗 去随便一搜就有吧