layui Tab问题

598lyt 598lyt 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区
为什么第一次点击 没有内容再次点击 任意标题就会显示内容 是我代码 哪里写的有问题哪
<!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();
});
});

...全文

相关推荐

使用layui实现的左侧菜单栏以及动态操作tab项方法

今天小编就为大家分享一篇使用layui实现的左侧菜单栏以及动态操作tab项方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

weixin_38734993

在layui tab控件中载入外部html页面的方法

今天小编就为大家分享一篇在layui tab控件中载入外部html页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

weixin_38557670

layui实现tab的添加拒绝重复的方法

layui中tab的添加:重复添加,没有自动跳转肯定让你烦了很久吧,我也是花了很久才解决的 前提是这样的:我点击不同按钮生成对应tab,而且再点击前已经有一个tab了(比如说:‘首页‘,个人需求而已) 我的思路是这样的:每添加一个tab用链表存储其id,通过id判断是否存在,并确定是添加tab还是跳转到指定tab。 删除时,监听tab的删除,然后从链表里删除对应id。但是在element.on(‘tabDelete’,function(data){});中得不到你删除tab的id。有幸的是,能得到下标:data.index。我用其表示链表中的‘第几个元素’,因为data.index的值是“流动

weixin_38682054

Layui左侧菜单与动态Tab实现[源码]

本文详细介绍了使用Layui框架实现左侧菜单栏及动态操作Tab项的方法。作者首先分享了在实现左侧菜单栏时遇到的问题及解决方案,如正确导入layer.js文件的位置对下拉菜单显示的影响。随后重点讲解了如何动态操作Tab项,包括新增、切换、删除Tab等功能的实现。文章提供了完整的HTML和JavaScript代码示例,并解释了关键代码的作用,如lay-filter属性的重要性以及element模块的使用。此外,还介绍了如何为Tab项添加右键菜单功能,实现关闭当前或所有Tab的操作。最后,作者分享了实现过程中参考的相关资源链接。

lilh34434

解决layUI的页面显示不全的问题

今天小编就为大家分享一篇解决layUI的页面显示不全的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

weixin_38606656
评论 1
收藏 已收藏
分享
返回顶部
598lyt
JavaScript 87,983 成员 224,681 内容