layui引入 tab选项卡切换多页面tab切换
/**
*css部分代码
*/
<link rel="stylesheet" type="text/css" href="js/mon/UILab/layui2.4.5/css/layui.css" />
/**
*html
*/
<div class="layui-tab" lay-filter="all">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</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 class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
/**
*js
*/
<script type="text/javascript" src="js/mon/UILab/layui2.4.5/layui.js"></script>
<script>
layui.use('element', function(){
var $ = layui.jquery;
var element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
element.on('tab(prev)', function(data){});
element.on('tab(all)', function(data){
if(data.index == 0){
console.log("内容1");
} else if(data.index == 1){
console.log("内容2");
}
});
});
</script>
js用这个比较简洁
<script>
//注意:选项卡 依赖 element 模块,否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
});
</script>
声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至201542412@QQ.com举报,一经查实,本站将立刻删除。
相关推荐
-
杰奇全站伪静态说明
登陆杰奇后台,在小说连载参数设置中,找到“伪静态”设置部分,本别对文章信息页面、文章分类页面、首字母分类页面、排行榜页面设置好伪静态规则。具体如下供参考:
-
网站数据结构通常包括各种用于优化搜索引擎结果和社交媒体分享
meta 标签在 HTML 中用来表示网页的元数据,它不会直接显示在页面上,但是对于搜索引擎优化(SEO)和社交媒体平台等非常重要。您提供的这个 meta 标签示例用于定义网站在社交媒体平台上共享时所显示的站点名称。
-
一款很简约的蓝色风格404错误页面模板(站长收藏
一款很简约的蓝色风格404错误页面模板(站长收藏
-
js实现图片懒加载的方法代码优化版
js实现图片懒加载的方法代码优化版.支持图片底部高度。
-
sql导入默认用户解决杰奇cms无法登陆管理员账户问题 - ytkah
前些天下载杰奇cms来体验一下,下载的杰奇1.8版,不是默认的安装程序,上传文件,手工导入sql数据库,修改了config配置文件,很快就完工了。前台可以展现,除了有些乱码显...