87,910
社区成员
发帖
与我相关
我的任务
分享layui Tab问题
为什么第一次点击 没有内容再次点击 任意标题就会显示内容 是我代码 哪里写的有问题哪
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
X-admin v1.0
</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="./css/x-admin.css" media="all">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header header header-demo">
<div class="layui-main">
<a class="logo" href="./index.html">
X-admin v1.0
</a>
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item"><img src="./images/logo.png" class="layui-circle" style="border: 2px solid #A9B7B7;" width="35px" alt=""></li>
<li class="layui-nav-item">
<a href="javascript:;">admin</a>
<dl class="layui-nav-child"> <!-- 二级菜单 -->
<dd><a href="">个人信息</a></dd>
<dd><a href="">切换帐号</a></dd>
<dd><a href="./login.html">退出</a></dd>
</dl>
</li>
<li class="layui-nav-item x-index"><a href="/">前台首页</a></li>
</ul>
</div>
</div>
<div class="layui-side layui-bg-black x-side">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree site-demo-nav" lay-filter="side">
<li class="layui-nav-item">
<a class="javascript:;" href="javascript:;">
<i class="layui-icon" style="top: 3px;"></i><cite>问题管理</cite>
</a>
<dl class="layui-nav-child">
<dd class="">
<dd class="">
<a href="javascript:;" _href="./question-list.html">
<cite>问题列表</cite>
</a>
</dd>
</dd>
<dd class="">
<dd class="">
<a href="javascript:;" _href="./question-del.html">
<cite>删除问题</cite>
</a>
</dd>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a class="javascript:;" href="javascript:;">
<i class="layui-icon" style="top: 3px;"></i><cite>产品管理</cite>
</a>
<dl class="layui-nav-child">
<dd class="">
<dd class="">
<a href="javascript:;" _href="./welcome.html">
<cite>产品列表（待开发）</cite>
</a>
</dd>
</dd>
<dd class="">
<dd class="">
<a href="javascript:;" _href="./welcome.html">
<cite>品牌管理（待开发）</cite>
</a>
</dd>
</dd>
<dd class="">
<dd class="">
<a href="javascript:;" _href="./welcome.html">
<cite>类型管理（待开发）</cite>
</a>
</dd>
</dd>
<dd class="">
<dd class="">
<a href="javascript:;" _href="./welcome.html">
<cite>类型属性（待开发）</cite>
</a>
</dd>
</dd>
<dd class="">
<dd class="">
<a href="javascript:;" _href="./category.html">
<cite>产品分类</cite>
</a>
</dd>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a class="javascript:;" href="javascript:;">
<i class="layui-icon" style="top: 3px;"></i><cite>轮播管理</cite>
</a>
<dl class="layui-nav-child">
<dd class="">
<dd class="">
<a href="javascript:;" _href="./banner-list.html">
<cite>轮播列表</cite>
</a>
</dd>
</dd>
</dl>
</li>
<li class="layui-nav-item" style="height: 30px; text-align: center">
</li>
</ul>
</div>
</div>
<div class="layui-tab layui-tab-card site-demo-title x-main" lay-filter="x-tab" lay-allowclose="true">
<div class="x-slide_left"></div>
<ul class="layui-tab-title" id="tabTitle">
<!--<li class="layui-this">-->
<!--我的桌面-->
<!--<i class="layui-icon layui-unselect layui-tab-close">ဆ</i>-->
<!--</li>-->
</ul>
<div class="layui-tab-content site-demo site-demo-body">
<div class="layui-tab-item layui-show">
<!--<iframe frameborder="0" src="./welcome.html" class="x-iframe"></iframe>-->
</div>
</div>
</div>
<div class="site-mobile-shade">
</div>
</div>
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script src="./js/x-admin.js"></script>
<script>
// var _hmt = _hmt || [];
// (function() {
// var hm = document.createElement("script");
// hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
// var s = document.getElementsByTagName("script")[0];
// s.parentNode.insertBefore(hm, s);
// })();
</script>
</body>
</html>
***********重点看 js************
layui.use(['element'], function(){
$ = layui.jquery;
element = layui.element();
//导航的hover效果、二级菜单等功能，需要依赖element模块
// 侧边栏点击隐藏兄弟元素
$('.layui-nav-item').click(function(event) {
$(this).siblings().removeClass('layui-nav-itemed');
});
// $('.layui-tab-title li').eq(0).find('i').remove();
height = $('.layui-layout-admin .site-demo').height();
$('.layui-layout-admin .site-demo').height(height-100);
if($(window).width()<750){
trun = 0;
$('.x-slide_left').css('background-position','0px -61px');
}else{
trun = 1;
}
$('.x-slide_left').click(function(event) {
if(trun){
$('.x-side').animate({left: '-200px'},200).siblings('.x-main').animate({left: '0px'},200);
$(this).css('background-position','0px -61px');
trun=0;
}else{
$('.x-side').animate({left: '0px'},200).siblings('.x-main').animate({left: '200px'},200);
$(this).css('background-position','0px 0px');
trun=1;
}
});
//监听导航点击
element.on('nav(side)', function(elem){
title = elem.find('cite').text();
url = elem.find('a').attr('_href');
// alert(url);
for (var i = 0; i <$('.x-iframe').length; i++) {
if($('.x-iframe').eq(i).attr('src')==url){
element.tabChange('x-tab', i);
return;
}
};
res = element.tabAdd('x-tab', {
title:$(this).text() + "<i></i>"//用于演示
//title:title//用于演示
,content: '<iframe frameborder="0" src="'+url+'" class="x-iframe"></iframe>'
});
var r=$("#tabTitle").find("li");
//console.log(r);
element.tabChange('x-tab',r.length-1);
//element.tabChange('x-tab', $('.layui-tab-title li').length-1);
// $('.layui-tab-title li').eq(0).find('i').remove();
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
X-admin v1.0
</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="./css/x-admin.css" media="all">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header header header-demo">
<div class="layui-main">
<a class="logo" href="./index.html">
X-admin v1.0
</a>
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item"><img src="./images/logo.png" class="layui-circle" style="border: 2px solid #A9B7B7;" width="35px" alt=""></li>
<li class="layui-nav-item">
<a href="javascript:;">admin</a>
<dl class="layui-nav-child"> <!-- 二级菜单 -->
<dd><a href="">个人信息</a></dd>
<dd><a href="">切换帐号</a></dd>
<dd><a href="./login.html">退出</a></dd>
</dl>
</li>
<li class="layui-nav-item x-index"><a href="/">前台首页</a></li>
</ul>
</div>
</div>
<div class="layui-side layui-bg-black x-side">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree site-demo-nav" lay-filter="side">
<li class="layui-nav-item">
<a class="javascript:;" href="javascript:;">
<i class="layui-icon" style="top: 3px;"></i><cite>问题管理</cite>
</a>
<dl class="layui-nav-child">
<dd class="">
<dd class="">
<a href="javascript:;" _href="./question-list.html">
<cite>问题列表</cite>
</a>
</dd>
</dd>
<dd class="">
<dd class="">
<a href="javascript:;" _href="./question-del.html">
<cite>删除问题</cite>
</a>
</dd>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a class="javascript:;" href="javascript:;">
<i class="layui-icon" style="top: 3px;"></i><cite>产品管理</cite>
</a>
<dl class="layui-nav-child">
<dd class="">
<dd class="">
<a href="javascript:;" _href="./welcome.html">
<cite>产品列表（待开发）</cite>
</a>
</dd>
</dd>
<dd class="">
<dd class="">
<a href="javascript:;" _href="./welcome.html">
<cite>品牌管理（待开发）</cite>
</a>
</dd>
</dd>
<dd class="">
<dd class="">
<a href="javascript:;" _href="./welcome.html">
<cite>类型管理（待开发）</cite>
</a>
</dd>
</dd>
<dd class="">
<dd class="">
<a href="javascript:;" _href="./welcome.html">
<cite>类型属性（待开发）</cite>
</a>
</dd>
</dd>
<dd class="">
<dd class="">
<a href="javascript:;" _href="./category.html">
<cite>产品分类</cite>
</a>
</dd>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a class="javascript:;" href="javascript:;">
<i class="layui-icon" style="top: 3px;"></i><cite>轮播管理</cite>
</a>
<dl class="layui-nav-child">
<dd class="">
<dd class="">
<a href="javascript:;" _href="./banner-list.html">
<cite>轮播列表</cite>
</a>
</dd>
</dd>
</dl>
</li>
<li class="layui-nav-item" style="height: 30px; text-align: center">
</li>
</ul>
</div>
</div>
<div class="layui-tab layui-tab-card site-demo-title x-main" lay-filter="x-tab" lay-allowclose="true">
<div class="x-slide_left"></div>
<ul class="layui-tab-title" id="tabTitle">
<!--<li class="layui-this">-->
<!--我的桌面-->
<!--<i class="layui-icon layui-unselect layui-tab-close">ဆ</i>-->
<!--</li>-->
</ul>
<div class="layui-tab-content site-demo site-demo-body">
<div class="layui-tab-item layui-show">
<!--<iframe frameborder="0" src="./welcome.html" class="x-iframe"></iframe>-->
</div>
</div>
</div>
<div class="site-mobile-shade">
</div>
</div>
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script src="./js/x-admin.js"></script>
<script>
// var _hmt = _hmt || [];
// (function() {
// var hm = document.createElement("script");
// hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
// var s = document.getElementsByTagName("script")[0];
// s.parentNode.insertBefore(hm, s);
// })();
</script>
</body>
</html>
***********重点看 js************
layui.use(['element'], function(){
$ = layui.jquery;
element = layui.element();
//导航的hover效果、二级菜单等功能，需要依赖element模块
// 侧边栏点击隐藏兄弟元素
$('.layui-nav-item').click(function(event) {
$(this).siblings().removeClass('layui-nav-itemed');
});
// $('.layui-tab-title li').eq(0).find('i').remove();
height = $('.layui-layout-admin .site-demo').height();
$('.layui-layout-admin .site-demo').height(height-100);
if($(window).width()<750){
trun = 0;
$('.x-slide_left').css('background-position','0px -61px');
}else{
trun = 1;
}
$('.x-slide_left').click(function(event) {
if(trun){
$('.x-side').animate({left: '-200px'},200).siblings('.x-main').animate({left: '0px'},200);
$(this).css('background-position','0px -61px');
trun=0;
}else{
$('.x-side').animate({left: '0px'},200).siblings('.x-main').animate({left: '200px'},200);
$(this).css('background-position','0px 0px');
trun=1;
}
});
//监听导航点击
element.on('nav(side)', function(elem){
title = elem.find('cite').text();
url = elem.find('a').attr('_href');
// alert(url);
for (var i = 0; i <$('.x-iframe').length; i++) {
if($('.x-iframe').eq(i).attr('src')==url){
element.tabChange('x-tab', i);
return;
}
};
res = element.tabAdd('x-tab', {
title:$(this).text() + "<i></i>"//用于演示
//title:title//用于演示
,content: '<iframe frameborder="0" src="'+url+'" class="x-iframe"></iframe>'
});
var r=$("#tabTitle").find("li");
//console.log(r);
element.tabChange('x-tab',r.length-1);
//element.tabChange('x-tab', $('.layui-tab-title li').length-1);
// $('.layui-tab-title li').eq(0).find('i').remove();
});
});
...全文
请发表友善的回复…
发表回复
