m0_65354176 2022-05-18 17:45 采纳率: 25%
浏览 52

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

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

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

  • 写回答

3条回答 默认 最新

  • CSDN专家-天际的海浪 2022-05-18 17:59
    关注

    搜索 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>
    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 5月18日

悬赏问题

  • ¥15 一道python难题
  • ¥15 用matlab 设计一个不动点迭代法求解非线性方程组的代码
  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机
  • ¥20 程序进入HardFault_Handler
  • ¥15 oracle集群安装出bug
  • ¥15 关于#python#的问题：自动化测试
  • ¥20 问题请教！vue项目关于Nginx配置nonce安全策略的问题
  • ¥15 教务系统账号被盗号如何追溯设备
  • ¥20 delta降尺度方法，未来数据怎么降尺度