layui左右布局

最新推荐文章于 2024-08-27 02:07:22 发布

转载最新推荐文章于 2024-08-27 02:07:22 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_43974876/article/details/99434741?

文章标签：

#layui

layui布局专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种基于layui框架实现的左右布局方法，并通过Ajax动态加载左侧导航及右侧商品内容，展示了完整的HTML结构和JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

左右布局点击左边右边内容切换
html

<div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
        <ul class="layui-nav layui-nav-tree site-demo-nav" lay-filter="leftNav">
<!--            <li class="layui-nav-item layui-nav-itemed">-->
<!--                <a class="javascript:;" href="javascript:;">商品分类1</a>-->
<!--            </li>-->
        </ul>

    </div>
</div>
<div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
    <div class="layui-body layui-tab-content site-demo site-demo-body">
        <div class="listpros">
<!--            <div class="probox">-->
<!--                <div class="pimg"><img src="../images/timg.png"></div>-->
<!--                <div class="pname">商品名称商品名称</div>-->
<!--            </div>-->
<!--            <div class="probox">-->
<!--                <div class="pimg"><img src="../images/timg.png"></div>-->
<!--                <div class="pname">商品名称商品名称</div>-->
<!--            </div>-->
<!--            <div class="probox">-->
<!--                <div class="pimg"><img src="../images/timg.png"></div>-->
<!--                <div class="pname">商品名称商品名称</div>-->
<!--            </div>-->
<!--            <div class="probox">-->
<!--                <div class="pimg"><img src="../images/timg.png"></div>-->
<!--                <div class="pname">商品名称商品名称</div>-->
<!--            </div>-->
        </div>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

$.ajax({
        url: //接口地址,
        type://请求方式,
        success:function (res) {
            console.log(res) //回调参数
            for (var i=0;i<res.data.length;i++){
            //左边导航 
                $(".layui-nav").append("<li class='layui-nav-item layui-nav-itemed'>" +
                        "                <a class='javascript:;' href='javascript:;' data-id='"+res.data[i].id+"'>"+res.data[i].name+"</a>" +
                        "            </li>")
            }
            layui.use('element', function () { //依赖于element模块
                var element = layui.element;
                element.on('nav(leftNav)', function(elem){
                    console.log(elem);
                    var  listid=elem.attr("data-id")  //获取选择的左边导航条的id
                    console.log(listid)
                    //根据id调取右边对应内容
                    $.ajax({
                        url:api+"getProductTypeId",
                        type:"GET",
                        data:{
                            typeId:listid
                        },
                        success:function (res) {
                            console.log(res)
                            if (res.code == 0){
                                for (var i=0;i<res.data.length;i++){
                                    $(".listpros").append("<div class='probox' pid='"+res.data[i].id+"'>" +
                                        "                <div class='pimg'><img src='"+res.data[i].imgUrl+"'></div>" +
                                        "                <div class='pname'>"+res.data[i].name+"</div>" +
                                        "            </div>")
                                }
                                $(".probox").on("click",function () {
                                    var pid=$(this).attr("pid");
                                    console.log(pid)
                                    localStorage.setItem("pid",pid);
                                    window.location.href="../index/productDetails.html";
                                })
                            }
                        }
                    })
                });
            });
        }
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46