您好,登錄后才能下訂單哦!
layui實現(xiàn)左側(cè)菜單點擊右側(cè)內(nèi)容區(qū)顯示?針對這個問題,這篇文章詳細介紹了相對應(yīng)的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
html代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title><?php echo $curTitle;?></title> <link rel="stylesheet" href="js/layui/css/layui.css" > </head> <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo">XXXX業(yè)務(wù)管理平臺</div> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item"> 歡迎光臨,商戶001 </li> <li class="layui-nav-item"><a href="">安全退出</a></li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左側(cè)垂直導(dǎo)航區(qū)域--> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item"> <a class="" href="javascript:;" >管理員管理</a> <dl class="layui-nav-child"> <dd> <a href="javascript:;" data-id="1" data-title="管理員列表" data-url="index.php?&a=adminList" class="site-demo-active" data-type="tabAdd">管理員列表</a></dd> <dd><a href="javascript:;" data-id="2" data-title="管理員日志" data-url="index.php?&a=adminLogList" class="site-demo-active" data-type="tabAdd">管理員日志</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;" >交易管理</a> <dl class="layui-nav-child"> <dd><a href="javascript:;" data-id="" data-id="3" data-title="存款列表" data-url="index.php?&a=adminList" class="site-demo-active" data-type="tabAdd">存款列表</a> </dd> <dd><a href="javascript:;" >代付列表</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;" >系統(tǒng)管理</a> <dl class="layui-nav-child"> <dd><a href="javascript:;" >支付API設(shè)置</a></dd> <dd><a href="javascript:;" >公告設(shè)置</a></dd> <dd><a href="javascript:;" >控制臺</a></dd> </li> </ul> </div> </div> <!--tab標簽--> <div class="layui-tab" lay-filter="demo" lay-allowclose="true" > <ul class="layui-tab-title"></ul> <div class="layui-tab-content"></div> </div> <div class="layui-footer" > <!-- 底部固定區(qū)域 --> © sunway.tk XXXX業(yè)務(wù)管理平臺 </div> </div> <script src="/js/layui/layui.js"></script> <script> <!--這里是放置js代碼區(qū)域--> </script> </body> </html>
javascript代碼:
layui.use(['element', 'layer', 'jquery'], function () { var element = layui.element; // var layer = layui.layer; var $ = layui.$; // 配置tab實踐在下面無法獲取到菜單元素 $('.site-demo-active').on('click', function () { var dataid = $(this); //這時會判斷右側(cè).layui-tab-title屬性下的有l(wèi)ay-id屬性的li的數(shù)目,即已經(jīng)打開的tab項數(shù)目 if ($(".layui-tab-title li[lay-id]").length <= 0) { //如果比零小,則直接打開新的tab項 active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title")); } else { //否則判斷該tab項是否以及存在 var isData = false; //初始化一個標志,為false說明未打開該tab項 為true則說明已有 $.each($(".layui-tab-title li[lay-id]"), function () { //如果點擊左側(cè)菜單欄所傳入的id 在右側(cè)tab項中的lay-id屬性可以找到,則說明該tab項已經(jīng)打開 if ($(this).attr("lay-id") == dataid.attr("data-id")) { isData = true; } }) if (isData == false) { //標志為false 新增一個tab項 active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title")); } } //最后不管是否新增tab,最后都轉(zhuǎn)到要打開的選項頁面上 active.tabChange(dataid.attr("data-id")); }); var active = { //在這里給active綁定幾項事件,后面可通過active調(diào)用這些事件 tabAdd: function (url, id, name) { //新增一個Tab項 傳入三個參數(shù),分別對應(yīng)其標題,tab頁面的地址,還有一個規(guī)定的id,是標簽中data-id的屬性值 //關(guān)于tabAdd的方法所傳入的參數(shù)可看layui的開發(fā)文檔中基礎(chǔ)方法部分 element.tabAdd('demo', { title: name, content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" ></iframe>', id: id //規(guī)定好的id }) FrameWH(); //計算ifram層的大小 }, tabChange: function (id) { //切換到指定Tab項 element.tabChange('demo', id); //根據(jù)傳入的id傳入到指定的tab項 }, tabDelete: function (id) { element.tabDelete("demo", id);//刪除 } }; function FrameWH() { var h = $(window).height(); $("iframe").css("height",h+"px"); } });
關(guān)于layui實現(xiàn)左側(cè)菜單點擊右側(cè)內(nèi)容區(qū)顯示問題的解答就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。