layui 如何修改标签class layui-this
时间: 2023-06-02 20:01:49 浏览: 551
可以使用 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模块来渲染模板并将结果插入到页面中。这样就可以避免重复的代码,使代码更加简洁。
layui 切换 layui-this
layui-this是layui框架中的一个类,用于标记当前选中的元素。一般情况下,当我们使用layui组件时,需要在多个选项卡或者按钮之间进行切换,此时就需要用到layui-this这个类。
具体实现方式如下:
1. 首先,在需要切换的元素上添加layui-this类,表示该元素是当前选中的元素。
2. 当用户点击其他选项卡或者按钮时,需要通过JavaScript代码切换当前选中的元素。
3. 切换当前选中的元素时,需要将之前的元素的layui-this类移除,然后再将新的元素添加layui-this类。
具体实现代码如下:
HTML代码:
```
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
</ul>
<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>
</div>
```
JavaScript代码:
```
// 获取选项卡标题列表
var tabTitles = $(".layui-tab-title li");
// 给每个选项卡标题添加点击事件
tabTitles.click(function(){
// 获取当前选中的元素
var currentTab = $(".layui-this");
// 将当前选中的元素的layui-this类移除
currentTab.removeClass("layui-this");
// 将用户点击的元素添加layui-this类
$(this).addClass("layui-this");
// 获取当前选中的选项卡的索引
var index = $(this).index();
// 切换选项卡内容
$(".layui-tab-content .layui-tab-item").eq(index).addClass("layui-show").siblings().removeClass("layui-show");
});
```
在以上代码中,我们首先获取了选项卡标题列表,然后给每个选项卡标题添加了点击事件。当用户点击选项卡标题时,我们通过JavaScript代码切换当前选中的元素,并根据当前选中的元素的索引值,切换选项卡内容。同时,我们还需要注意将之前选中的元素的layui-this类移除。