<div class="layui-layer-title" style="cursor: move;">编辑</div> 如何将编辑修改为新增
时间: 2023-10-06 19:10:57 浏览: 58
你可以直接在需要修改的元素中将“编辑”修改为“新增”即可,如下所示:
```
<div class="layui-layer-title" style="cursor: move;">新增</div>
```
如果你想在CSS中修改,也可以这样做:
```
.layui-layer-title:contains("编辑") {
font-size: 18px;
font-weight: bold;
color: #f00;
content: "新增";
}
```
上面的代码中,我们使用了`:contains`伪类来选中内容中包含“编辑”的元素,并使用`content`属性将其替换为“新增”。你可以根据自己的需要进行修改。但需要注意的是,`:contains`伪类在CSS3中已被废弃,如果你的项目需要兼容旧版本浏览器,建议使用JavaScript来实现。
相关问题
<div class="layui-layer-title" style="cursor: move;">编辑</div> 用css 修改编辑为 新增
您可以使用以下 CSS 代码将 "编辑" 修改为 "新增":
```css
.layui-layer-title {
text-align: center;
}
.layui-layer-title:after {
content: "新增";
display: inline-block;
margin-left: 10px;
}
```
将这段 CSS 代码添加到您的 HTML 文件或样式表中即可生效。
<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模块来渲染模板并将结果插入到页面中。这样就可以避免重复的代码,使代码更加简洁。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
解释下面这段代码:<input type="hidden" id="opType" value=""> <input type="hidden" id="id" value=""> <label class="layui-form-label">公开度</label> <select id="status" name="status" lay-verify="required"> <option selected="selected" disabled="disabled" style='display: none' value=''></option> <option value="3">保存草稿</option> <option value="2">教师可见</option> <option value="1">全体可见</option> </select> 发布
<label class="layui-form-label">公告标题</label> <input id="title" type="text" class="layui-input" lay-verify="title" placeholder="请输入公告标题"> <label class="layui-form-label">发布人</label> <input id="author" type="text" class="layui-input" lay-verify="author" placeholder="发布人">
<label class="layui-form-label">公告内容</label> <textarea id="content" class="layui-textarea" style="height: 300px;width: 70%;"></textarea>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)