layui 如何修改标签class layui-this

可以使用 jQuery 的 addClass 和 removeClass 方法来修改标签的 class，比如将 layui-this 改为 my-this： ``` // 获取标签对象 var $this = $('.layui-this'); // 移除 layui-this 类 $this.removeClass('layui-this'); // 添加 my-this 类 $this.addClass('my-this'); ``` 或者直接使用 toggleClass 方法来切换类： ``` $('.layui-this').toggleClass('layui-this my-this'); ```

<div class="layui-tab" lay-filter="test-handle" lay-allowclose="true" id="content"> <div class="layui-btn addContent" lay-active="addContent">添加创意包</div> <ul class="layui-tab-title" style="width: 85%"> <li class="layui-this" lay-id="1">创意包1</li> <li lay-id="2">创意包2</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> <div class="layui-tab" lay-filter="test-handle" lay-allowclose="true" id="content"> <ul class="layui-tab-title" style="width: 85%"> <li class="layui-this" lay-id="1">标题1</li> <li lay-id="2">标题2</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容-1</div> <div class="layui-tab-item">内容-2</div> </div> </div> </div> <div class="layui-tab-item">主体-2</div> </div> </div>优化一下代码

你可以将重复的代码抽取出来作为一个公共的HTML模板，然后在需要使用的地方引用即可，可以使代码更加简洁。例如，你可以将创意包的tab页抽出作为公共的模板： ```html  <script type="text/html" id="tpl-creative"> <div class="layui-tab" lay-filter="test-handle" lay-allowclose="true" id="{{d.id}}"> <ul class="layui-tab-title" style="width: 85%"> {{# layui.each(d.items, function(index, item){ }} <li {{ index === 0 ? 'class="layui-this"' : '' }} lay-id="{{ item.id }}">{{ item.title }}</li> {{# }); }} </ul> <div class="layui-tab-content"> {{# layui.each(d.items, function(index, item){ }} <div class="layui-tab-item {{ index === 0 ? 'layui-show' : '' }}">{{ item.content }}</div> {{# }); }} </div> </div> </script>  <div class="layui-tab" lay-filter="test-handle" lay-allowclose="true" id="content"> <div class="layui-btn addContent" lay-active="addContent">添加创意包</div> <ul class="layui-tab-title" style="width: 85%"> <li class="layui-this" lay-id="1">创意包1</li> <li lay-id="2">创意包2</li> </ul> <div class="layui-tab-content">  {{# layui.laytpl($('#tpl-creative').html()).render({ id: 'creative1', items: [{ id: '1', title: '标题1', content: '内容-1' }, { id: '2', title: '标题2', content: '内容-2' }] }) }} </div> </div> ``` 在上面的代码中，我们将创意包的tab页抽取出来作为了一个公共的模板，可以通过laytpl模块来渲染模板并将结果插入到页面中。这样就可以避免重复的代码，使代码更加简洁。

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <html> <head> <base href="<%=basePath%>"> <title>$Title$</title>  <link href="layui/css/layui.css" rel="stylesheet" />  <script src="layui/layui.js"></script> </head> <body> <button type="button" class="layui-btn layui-bg-blue">蓝色按钮</button> <div class="layui-tab" lay-filter="test-handle" lay-allowclose="true"> <ul class="layui-tab-title"> <li class="layui-this" lay-id="11">标签1</li> <li lay-id="22">标签2</li> <li lay-id="33">标签3</li> <li lay-id="44">标签4</li> <li lay-id="55">标签5</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容-1</div> <div class="layui-tab-item"> <input type="text"/> </div> <div class="layui-tab-item">内容-3</div> <div class="layui-tab-item">内容-4</div> <div class="layui-tab-item">内容-5</div> </div> </div> </body> </html> layui无法解析getContextPath

根据您提供的代码，看起来您正在使用 JSP 页面，并且在其中使用了 `getContextPath()` 方法来获取项目的上下文路径。然后，您将该路径用于设置 layui 的资源引用。根据您的描述，"layui无法解析getContextPath" 可能是指 layui 目录中的 CSS 文件和 JS 文件无法正确加载或解析。这可能是由于路径设置不正确导致的问题。其中，您使用了 `<base href="<%=basePath%>">` 标签来设置基础路径，这将影响到整个页面中相对路径的解析。请确保 `basePath` 变量的值是正确的项目上下文路径。另外，请注意确保 `layui` 目录与您的 JSP 文件处于相同的目录层级，并且在正确的位置。如果 `layui` 目录在正确的位置，那么 `<link href="layui/css/layui.css" rel="stylesheet" />` 和 `<script src="layui/layui.js"></script>` 这两行代码应该可以正确地引入 layui 的 CSS 和 JS 文件。如果问题仍然存在，请提供更多关于您项目结构、文件布局和报错信息的详细描述，以便更好地帮助您解决问题。

阅读全文

layui 如何修改标签class layui-this

相关推荐

修改layui的后台模板的左侧导航栏可以伸缩的方法

layui的表格table选中数据后更改本行的颜色

layui-select动态选中值的例子

我要把list.html放到内容1内容1的位置，我该怎么做

layui之数据表格--与后台交互获取数据的方法

{{item.name}} 中的centermenu的值在哪找

layui 切换 layui-this

<button type="button" class="layui-btn">横排</button> <button type="button" class="layui-btn">竖排</button> 点击哪一个哪一个加背景色 其余去掉

<input type="text" name="username" value="默认有值状态" class="layui-input"> 如何给在获取焦点时 给input标签加上 lay-affix="clear"

若依管理存在任何文件读取漏洞检测系统，渗透测试.zip

最新推荐

layUI实现三级导航菜单效果

layui实现三级导航菜单

使用layui前端框架弹出form表单以及提交的示例

若依管理存在任何文件读取漏洞检测系统，渗透测试.zip

【java毕业设计】学生社团管理系统源码（完整前后端+说明文档+LW）.zip

C语言数组操作：高度检查器编程实践

管理建模和仿真的文件

【KUKA系统变量进阶】：揭秘从理论到实践的5大关键技巧

如何使用Python编程语言创建一个具有动态爱心图案作为背景并添加文字'天天开心（高级版）'的图形界面？

基于Swift开发的嘉定单车LBS iOS应用项目解析

<button type="button" class="layui-btn">横排</button> <button type="button" class="layui-btn">竖排</button> 点击哪一个哪一个加背景色其余去掉

<input type="text" name="username" value="默认有值状态" class="layui-input"> 如何给在获取焦点时给input标签加上 lay-affix="clear"