白云岛资源网 Design By www.pvray.com
用了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;">
<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>
白云岛资源网 Design By www.pvray.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
白云岛资源网 Design By www.pvray.com
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。