layui左右布局

左右布局 点击左边右边内容切换
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>

js

$.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";
                                })
                            }
                        }
                    })
                });
            });
        }
    })