溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“怎么用layui實現點擊左側導航切換右側內容且右側選項卡跟隨變化的效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么用layui實現點擊左側導航切換右側內容且右側選項卡跟隨變化的效果”吧!
用了layui框架
1.home.html主界面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首頁</title>
<script src="../js/jquery.js"></script>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<!--1.頭部區域-->
<div class="layui-header">
<div class="layui-logo">后臺管理</div>
<!-- 頭部區域（可配合layui已有的水平導航） -->
<ul class="layui-nav layui-layout-left">
</ul>
<ul class="layui-nav layui-layout-right">
<!--<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
賢心
</a>
<dl class="layui-nav-child">
<dd><a href="">基本資料</a></dd>
<dd><a href="">安全設置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退了</a></li>-->
</ul>
</div>
<!--2.左側導航-->
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左側導航區域（可配合layui已有的垂直導航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item leftdaohang" data-url="jiaose.html" mytitle="角色管理"><a>角色管理</a></li>
<li class="layui-nav-item leftdaohang" data-url="zhanghao.html" mytitle="賬號管理"><a>賬號管理</a></li>
</ul>
</div>
</div>
<!--3.右側主體內容區-->
<div class="layui-body">
<!--tabs標簽-->
<div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true">
<ul class="layui-tab-title">
<!-- <li class="layui-this">角色管理</li>-->
</ul>
<div class="layui-tab-content" style="height: 150px;">
<!--<div class="layui-tab-item layui-show">
1. 我個人比較喜歡卡片風格的，所以你發現又是以卡片的風格舉例
2. 刪除功能適用于所有風格
</div>-->
<!--<div class="layui-tab-item">
<iframe style="width: 100%;height: 100%;" scrolling="no" src="jiaose.html" ></iframe>
</div>-->
</div>
</div>
</div>
<!--4.底部固定區域-->
<div class="layui-footer">
<!-- 底部固定區域 -->
© layui.com - 底部固定區域
</div>
</div>
<script src="../layui/layui.all.js"></script>
<script>
layui.use('element', function(){
var $ = layui.jquery
,element = layui.element; //Tab的切換功能，切換事件監聽等，需要依賴element模塊
//觸發事件
var active = {
tabAdd: function(){
//新增一個Tab項
var htmlurl=$(this).attr('data-url');
var mytitle=$(this).attr('mytitle');
// alert("觸發tab增加事件："+mytitle);
//先判斷是否已經有了tab
var arrayObj = new Array(); //創建一個數組
$(".layui-tab-title").find('li').each(function() {
var y = $(this).attr("lay-id");
arrayObj.push(y);
});
// alert("遍歷取到的數組："+arrayObj);
var have=$.inArray(mytitle, arrayObj); //返回 3,
if (have>=0) {
//tab已有標簽
// alert("遍歷的已有標簽："+mytitle);
element.tabChange('demo', mytitle); //切換到當前點擊的頁面
} else{
//沒有相同tab
// alert("遍歷的沒有相同tab："+mytitle);
element.tabAdd('demo', {
title:mytitle //用于演示
,content: '<iframe style="width: 100%;height: 100%;" scrolling="no" src='+htmlurl+' ></iframe>'
,id: mytitle //實際使用一般是規定好的id，這里以時間戳模擬下
})
element.tabChange('demo', mytitle); //切換到當前點擊的頁面
}
}
};
$(".leftdaohang").click(function(){
var type="tabAdd";
var othis = $(this);
// var htmlurl=$(this).attr('data-url');
// var mytitle=$(this).attr('mytitle');
active[type] ? active[type].call(this, othis) : '';
});
});
</script>
<!--<script>
var loginurl="http://localhost:8088/user/showUser";
var mytoken=sessionStorage.getItem("gltoken");
console.log("緩存的token:"+mytoken);
netWorking();
$(".leftdaohang").click(function(){
var htmlurl=$(this).attr('data-url');
var mytitle=$(this).attr('mytitle');
addTab(mytitle);
document.getElementById("myiframe").src=htmlurl;
});
function addTab (tabname) {
$(".layui-tab-title li").removeClass("layui-this");
$('.layui-tab-title').append("<li>"+tabname+"</li>");
//觸發事件
}
function netWorking () {
$.ajax({
type:"post",
url:loginurl,
data:{
token:mytoken
},
success: function(res) {
console.log("home請求數據1.："+res);
var datas=JSON.parse(res);
},
error:function() {
alert("失敗");
}
});
}
</script>-->
</body>
</html>2.兩個切換界面（jiaose.html,zhanghao.html）:
jiaose.html
iaose.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>角色管理</title> </head> <body style="margin: 500px;text-align: center;background: burlywood;"> <h2>角色管理</h2> </body> </html>
zhanghao.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>賬號管理</title> </head> <body style="margin: 100px;"> <h2>賬號管理</h2> </body> </html>
到此，相信大家對“怎么用layui實現點擊左側導航切換右側內容且右側選項卡跟隨變化的效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
