layui的CSS 和layui.all.js 文件分别载入文件后，为什么对DIV里的设置了对应的class却出不了结果_百度知道
layui的CSS 和layui.all.js 文件分别载入文件后，为什么对DIV里的设置了对应的class却出不了结果
&div class=&layui-tab layui-tab-card&&
&ul class=&layui-tab-title&&
&li class=&layui-this&&网站设置&/li&
&li&用户管理&/li&
&li&权限分配&/li&
&li&商品管理&/li&
&li&订单管理&/li&
&div cla...
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
&!doctype html&&html&&head&&meta charset=&utf-8&&&title&layui.form小例子&/title&&link rel=&stylesheet& href=&layui.css& media=&all&&&/head&&body&&form class=&layui-form&& &!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 --& &div class=&layui-form-item&&
&label class=&layui-form-label&&输入框&/label&
&div class=&layui-input-block&&
&input type=&text& name=&& placeholder=&请输入& autocomplete=&off& class=&layui-input&&
&/div& &/div& &div class=&layui-form-item&&
&label class=&layui-form-label&&下拉选择框&
采纳率：49%
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。使用layui实现的左侧菜单栏以及动态操作tab项
首先说一下左侧菜单栏
这是一个最基本的左侧菜单栏，实现的过程很简单，官方的说明文档就有，但是我在导入layer.js之后，直接复制这段官方代码到我的编辑器上时，发现页面是这样的：
发现，绑定属性的菜单并没有下拉选项，这个问题在我导入layer.all.js之后解决了，而且发现如果是在页面的最上方导入的话也没有下拉选项，只有在html代码下面导入，才可以显示 ，不知道是什么原因。
下面说重点，动态操作tab项
页面截图：
tab项右键菜单：
这里右键菜单的样式并没有做太多的美化。
html代码：（页面中关于引入js和css文件的部分被我省略了，还有要注意jQuery的引入顺序）
class="layui-tab layui-tab-card site-demo-button" style="position:"&
class="layui-nav layui-nav-tree layui-nav-side"&
class="layui-nav-item layui-nav-itemed"&
href="javascript:;"&默认展开&
class="layui-nav-child"&
data-url="a" data-id="11" data-title="选项a" href="#" class="site-demo-active" data-type="tabAdd"&选项a&
href="#" data-url="b" data-title="选项b"
data-id="22" class="site-demo-active" data-type="tabAdd"&选项b&
href=""&跳转&
class="layui-nav-item"&
href="javascript:;"&解决方案&
class="layui-nav-child"&
href=""&移动模块&
href=""&后台模版&
href=""&电商平台&
class="layui-nav-item"&
href="#" data-url="c" data-title="选项c"
data-id="33" class="site-demo-active" data-type="tabAdd"&产品c&
class="layui-nav-item"&
href=""&大数据&
class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200"&
class="layui-tab-title"&
class="rightmenu" style="display:position:"&
data-type="closethis"&关闭当前&
data-type="closeall"&关闭所有&
class="layui-tab-content"&
layui.use('element', function() {
var $ = layui.
var element = layui.
var active = {
tabAdd: function(url,id,name) {
element.tabAdd('demo', {
title: name,
content: '&iframe data-frameid="'+id+'" scrolling="auto" frameborder="0" src="'+url+'.html" style="width:100%;height:99%;"&&/iframe&',
CustomRightClick(id);
FrameWH();
tabChange: function(id) {
element.tabChange('demo', id);
tabDelete: function (id) {
element.tabDelete("demo", id);
, tabDeleteAll: function (ids) {
$.each(ids, function (i,item) {
element.tabDelete("demo", item);
$('.site-demo-active').on('click', function() {
var dataid = $(this);
if ($(".layui-tab-title li[lay-id]").length &= 0) {
active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
var isData = false;
$.each($(".layui-tab-title li[lay-id]"), function () {
if ($(this).attr("lay-id") == dataid.attr("data-id")) {
isData = true;
if (isData == false) {
active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
active.tabChange(dataid.attr("data-id"));
function CustomRightClick(id) {
$('.layui-tab-title li').on('contextmenu', function () { return false; })
$('.layui-tab-title,.layui-tab-title li').click(function () {
$('.rightmenu').hide();
$('.layui-tab-title li').on('contextmenu', function (e) {
var popupmenu = $(".rightmenu");
popupmenu.find("li").attr("data-id",id);
l = ($(document).width() - e.clientX) & popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
t = ($(document).height() - e.clientY) & popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
popupmenu.css({ left: l, top: t }).show();
return false;
$(".rightmenu li").click(function () {
if ($(this).attr("data-type") == "closethis") {
active.tabDelete($(this).attr("data-id"))
} else if ($(this).attr("data-type") == "closeall") {
var tabtitle = $(".layui-tab-title li");
var ids = new Array();
$.each(tabtitle, function (i) {
ids[i] = $(this).attr("lay-id");
active.tabDeleteAll(ids);
$('.rightmenu').hide();
function FrameWH() {
var h = $(window).height() -41- 10 - 60 -10-44 -10;
$("iframe").css("height",h+"px");
$(window).resize(function () {
FrameWH();
tab项是放在&div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200"& 这个div中的，其中有一个重要的属性lay-filter，在js中调用的tabAdd，tabDelete等多种方法都携带了这个参数，我对此的理解是相当于一个判断拦截功能，将tab项放在lay-filter=‘demo’的div中。可以借助该参数，完成指定元素的局部更新。
其中还有关于element的操作，var element = layui.element
element模块的实例
返回的element变量为该实例的对象，携带一些用于元素操作的基础方法，我们就是用这些方法进行tab项的新增和删除还有切换。
这是element 中的tabAdd方法，其中的content可以是一个iframe页面，在此例中，我就是传递了一个简单的页面，这就实现了不同页面间的一些切换。
element.tabAdd('demo', {
title: '选项卡的标题'
,content: '选项卡的内容'
,id: '选项卡标题的lay-id属性值'
贴上之前参照的一个地址：
使用Layui搭建后台管理界面
layui之动态添加下拉菜单
layui-tree使用ajax加载数据
layui-tree实现Ajax异步请求后动态添加节点
layui自定义ajax左侧三级菜单
Layui前端框架导航栏使用介绍
layui-tree实现Ajax异步请求后动态添加html元素
layui源码详细分析之树形菜单
layui左侧三级菜单2.0
layui学习笔记4--导航栏
没有更多推荐了，layerui代码控制tab选项卡，添加，关闭
&!DOCTYPE html&
&meta charset="utf-8"&
&title&layui&/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 href="layui/css/layui.css" rel="stylesheet" /&
&script src="layui/layui.js"&&/script&
&!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --&
&div class="layui-layout layui-layout-admin"&
&div class="layui-header"&
&div class="layui-logo"&layui 后台布局&/div&
&!-- 头部区域（可配合layui已有的水平导航） --&
&ul class="layui-nav layui-layout-left"&
&li class="layui-nav-item"&&a href=""&控制台&/a&&/li&
&li class="layui-nav-item"&&a href=""&商品管理&/a&&/li&
&li class="layui-nav-item"&&a href=""&用户&/a&&/li&
&li class="layui-nav-item"&
&a href="javascript:;"&其它系统&/a&
&dl class="layui-nav-child"&
&dd&&a href=""&邮件管理&/a&&/dd&
&dd&&a href=""&消息管理&/a&&/dd&
&dd&&a href=""&授权管理&/a&&/dd&
&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"&
&dl class="layui-nav-child"&
&dd&&a href=""&基本资料&/a&&/dd&
&dd&&a href=""&安全设置&/a&&/dd&
&li class="layui-nav-item"&&a href=""&退了&/a&&/li&
&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 layui-nav-itemed"&
&a class="" href="javascript:;"&所有商品&/a&
&dl class="layui-nav-child"&
&dd&&a href="javascript:;"&列表一&/a&&/dd&
&dd&&a href="javascript:;"&列表二&/a&&/dd&
&dd&&a href="javascript:;"&列表三&/a&&/dd&
&dd&&a href=""&超链接&/a&&/dd&
&li class="layui-nav-item"&
&a href="javascript:;"&解决方案&/a&
&dl class="layui-nav-child"&
&dd&&a href="javascript:;"&列表一&/a&&/dd&
&dd&&a href="javascript:;"&列表二&/a&&/dd&
&dd&&a href=""&超链接&/a&&/dd&
&li class="layui-nav-item"&&a href=""&云市场&/a&&/li&
&li class="layui-nav-item"&&a href=""&发布商品&/a&&/li&
&div class="layui-body"&
&div style="padding: 3"&
&div class="layui-tab" lay-filter="demo" &
&ul class="layui-tab-title" &
&li class="layui-this" lay-id="11" id="11"&网站设置 &/li&
&li lay-id="22"&用户管理 &i class="layui-icon layui-unselect layui-tab-close"&ဆ&/i&&/li&
&li lay-id="33"&权限分配&/li&
&li lay-id="44"&商品管理&/li&
&li lay-id="55"&订单管理&/li&
&div class="layui-tab-content"&
&div class="layui-tab-item layui-show"&内容1&/div&
&div class="layui-tab-item"&内容2&/div&
&div class="layui-tab-item"&内容3&/div&
&div class="layui-tab-item"&内容4&/div&
&div class="layui-tab-item"&内容5&/div&
&div class="site-demo-button" style="margin-bottom: 0;"&
&button class="layui-btn site-demo-active" data-type="tabAdd"&新增Tab项&/button&
&button class="layui-btn site-demo-active" data-type="tabDelete"&删除：商品管理&/button&
&button class="layui-btn site-demo-active" data-type="tabChange"&切换到：用户管理&/button&
&!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --&
layui.use('element', function () {
var $ = layui.jquery
, element = layui. //Tab的切换功能，切换事件监听等，需要依赖element模块
//触发事件
var active = {
tabAdd: function () {
//新增一个Tab项
element.tabAdd('demo', {
title: '新选项&i class="layui-icon layui-unselect layui-tab-close"&ဆ&/i&' //用于演示
, content: '内容' + (Math.random() * 1000 | 0)
, id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
//增加点击关闭事件
var r = $(".layui-tab-title").find("li");
//每次新打开tab都是最后一个，所以只对最后一个tab添加点击关闭事件
r.eq(r.length - 1).children("i").on("click", function () {
alert($(this).parent("li").attr('lay-id'));
element.tabDelete("demo", $(this).parent("li").attr('lay-id'));
}), element.tabChange("demo", r.length - 1);
element.init();
, tabDelete: function (othis) {
//删除指定Tab项
element.tabDelete('demo', '44'); //删除：“商品管理”
othis.addClass('layui-btn-disabled');
, tabChange: function () {
//切换到指定Tab项
element.tabChange('demo', '22'); //切换到：用户管理
$('.site-demo-active').on('click', function () {
var othis = $(this), type = othis.data('type');
active[type] ? active[type].call(this, othis) : '';
//Hash地址的定位
var layid = location.hash.replace(/^#test=/, '');
element.tabChange('test', layid);
element.on('tab(test)', function (elem) {
location.hash = 'test=' + $(this).attr('lay-id');
layui-选项卡
layui弹出框Tab选项卡
layer t之layer tab/ztree二级菜单布局
使用layui实现的左侧菜单栏以及动态操作tab项
layui中tab的添加拒绝重复
layui tab控件中载入外部html页面
没有更多推荐了，layui tab选项卡如何判断标题是否存在_百度知道
layui tab选项卡如何判断标题是否存在
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
/**当前的tab 是否存在如果存在就 自动选择 否则 创建新的tab**/ if ($('#main-tab').tabs('exists', title)){ $('#main-tab').tabs('select', title); } else { /**添加一个tab标签**/ $(&#main-tab&).tabs('add',{ title: title, selected: tr...
采纳率：94%
来自团队：
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。共 169 个DEMO
猜你喜欢...
热点内容...