layui切换
<!DOCTYPE html> <html> <head> <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 rel="stylesheet" href="__STATIC__/add/layui/css/layui.css" media="all"> <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 --> </head> <body> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>简洁风格的Tab</legend> </fieldset> <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户管理</li> <li>权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <div class="layui-tab-content" style="height: 100px;"> <div class="layui-tab-item layui-show"> <textarea id="demo" style="display: none;">{$list['title']}</textarea> </div> <div class="layui-tab-item"> <textarea id="demo2" style="display: none;">{$list['reference_money']}</textarea> </div> <div class="layui-tab-item"> <textarea id="demo3" style="display: none;">{$list['detail_img']}</textarea> </div> <div class="layui-tab-item"> <textarea id="demo4" style="display: none;">{$list['start_time']}</textarea> </div> <div class="layui-tab-item"> <textarea id="demo5" style="display: none;">{$list['end_time']}</textarea> </div> </div> </div> </div> <script src="__STATIC__/js/jquery.min.js" charset="utf-8"></script> <script src="__STATIC__/add/layui/layui.js" charset="utf-8"></script> <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 --> <script> layui.use(['element','layedit'], function(){ var $ = layui.jquery ,element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块 var layedit = layui.layedit; layedit.set({ uploadImage: { url: '{:url(\'Achievementactivity/layuitabupload\')}' //接口url ,type: '' //默认post } }); //注意:layedit.set 一定要放在 build 前面,否则配置全局接口将无效。 layedit.build('demo'); //建立编辑器 layedit.build('demo2'); //建立编辑器 layedit.build('demo3'); //建立编辑器 layedit.build('demo4'); //建立编辑器 layedit.build('demo5'); //建立编辑器 }); </script> </body> </html>