用了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("解析xml取到的数字能量数组："+arrayObj);
var have=$.inArray(mytitle, arrayObj); //回到 3,
if (have>=0) {
//tab现有标识
// alert("解析xml的现有标识："+mytitle);
element.tabChange('demo', mytitle); //转换到当今点一下的网页页面
} else{
//沒有同样tab
// alert("解析xml的沒有同样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.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;">
<h1>人物角色管理方法</h1>
</body>
</html>
zhanghao.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>账户管理方法</title>
</head>
<body style="margin: 100px;">
<h1>账户管理方法</h1>
</body>
</html>
到此这篇有关layui架构完成点一下左边导航栏转换右边內容且右边选择项卡追随转变的实际效果的文章内容就详细介绍到这了,大量有关html5完成点一下左边导航栏转换右边內容內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！
Copyright © 2002-2020 h5互动游戏_微信h5怎么制作_h5转盘抽奖_h5测试制作_凡科H5 版权所有 （网站地图） 粤ICP备10235580号