方法一：

每个页面独立显示，通过 class=“active” 选择当前teb页。

       <div class="box-header"><ul class="box-tools nav nav-tabs"><li class="active"><a href="${ctx}/business/ruleInfo/list/1">${text('规则1')}</a></li><li class=""><a href="${ctx}/business/ruleInfo/list/2">${text('规则2')}</a></li><li class=""><a href="${ctx}/business/ruleInfo/list/3">${text('规则3')}</a></li><div class="pull-right"><a href="#" class="btn btn-default" id="btnSearch" title="${text('查询')}"><i class="fa fa-filter"></i> ${text('查询')}</a><% if(hasPermi('business:ruleInfo:edit')){ %><a href="${ctx}/business/ruleInfo/form?type=1" class="btn btn-default btnTool" data-layer="true" title="${text('新增规则')}"><i class="fa fa-plus"></i> ${text('新增')}</a><% } %></div></ul></div>

方法二

在一个页面中，嵌套多个tab子页；
// 激活第一个页签
$(‘#tabpanel1 .tabpanel_mover li:first’).click();

<style type="text/css">
.tabpanel_mover li.active{background-color:#3aa0ff;
}
.tabpanel_mover li{padding:1px 16px 2px 3px;margin:6px 0 6px 6px;border:1px solid #e4e4e4;border-radius:3px;background:#fff;box-shadow:0 0 5px #e6e6e6;line-height:30px;width: 140px;
}
.tabpanel_mover li .title{font-size:14px;
}
.tabpanel_mover li.active div{color:#fff;
}
.tabpanel_tab_content{line-height: 47px;
}
</style>
<div class="main-content"><div class="box box-main"><div class="box-header with-border"><div class="box-title"><i class="fa icon-notebook"></i> 会员规则管理</div></div><div class="box-body pt0 scroll-x"><div class="row"><div class="col-sm-12 pr0"><div id="tabpanel1"></div></div></div></div></div>
</div>
<% } %><style>.tabpanel_tab_content .tabpanel_move_content {background: #fff;}
</style><script>// 一个页面一个 tab 控件js.initTabPage('tabpanel1', {height: function () {var windowHeight = $(window).height(),headerHeight = $('.box-header').outerHeight(),footerHeight = $('.box-footer').outerHeight(),height = windowHeight - headerHeight - footerHeight - 3;return height < 300 ? 300 : height;}});// 打开示例页面（不可关闭）js.addTabPage(null, "规则1", "${ctx}/rule/ruleInfo/规则1List", false);js.addTabPage(null, "规则2", "${ctx}/rule/ruleInfo/规则2List", false);js.addTabPage(null, "规则3", "${ctx}/rule/ruleInfo/规则3List", false);js.addTabPage(null, "规则4", "${ctx}/rule/ruleInfo/规则4List", false);if("1" == "${ruleInfo.haveTimeTypeAutoPay}"){js.addTabPage(null, "规则5", "${ctx}/rule/ruleInfo/规则5List", false);}// 用于机构保存后的刷新列表页面（示例）window.win = $('#tabpanel1 iframe:first')[0].contentWindow;// 激活第一个页签$('#tabpanel1 .tabpanel_mover li:first').click();// 指定内页调用的 tab 对象window.tabPage = top.tabPage;
</script>

Tab页的两种写法 - jeesite记录相关推荐

关于在页头写Tabs的两种写法
最近有一个需求,需要将antdesign的Tab组件放在页头,而内容分离到页面内容,做成这样的效果: 想要实现这样的写法,要在页头组件PageHeaderLayout里下文章,这里总结两种写法,分别是 ...
Model层的两种写法
Model层的两种写法第一种写法 namespace MyMVC.Models {public class Child{ //属性private int id;public int Id{get { ...
sum 去重_总结leetcode上【排列问题】【组合问题】【子集问题】回溯算法去重的两种写法！...
本周小结!(回溯算法系列三)续集在本周小结!(回溯算法系列三) 中一位录友对整颗树的本层和同一节点的本层有疑问,也让我重新思考了一下,发现这里确实有问题,所以专门写一篇来纠正,感谢录友们的积极交 ...
【v-on】一个元素绑定多个事件以及一个事件绑定多个函数的两种写法
本文代码主要讲述了v-on绑定事件函数传参,一个元素绑定多个事件的两种写法,一个事件绑定多个函数的两种写法,修饰符的使用. <!DOCTYPE html> <html lang=&q ...
Vue2（一）：初识Vue、模板语法、数据绑定、el和data的两种写法、MVVM、数据代理、事件
Vue2学习笔记:第一章一.初识Vue 1. Vue的特点 2. Vue实例中的el和data 3.总结二.模板语法 1.插值语法 2.指令语法三.数据绑定 1.单向数据绑定(v-bind) 2 ...
两种写法的效果一样，那么到底哪一种更好呢？
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 有时候,我们在写一些循环逻辑的时候,并不是按执行次数等作 ...
controller 有两种写法，讨论一下两种写法的区别：
controller 有两种写法,讨论一下两种写法的区别: 写法 1: app.controller('myCtrl', function($scope, $location) { $scope.my ...
Sql语句中 case when .. 的两种写法
在 SQL查询语句中, case 语句的两种写法(SqlServer 2005 下测试通过): 1. select (case 字段1 when a then 0 when b then 1 e ...
20210408:力扣(二分查找法的两种写法以及变体题目)
二分查找法的两种写法以及变体题目写在前面题目思路与算法代码实现写在最后写在前面关于二分查找,真的是一个非常实用的查找算法,主要有两种写法,今天在总结时再次碰到,再次整理,方便后续查看复习 ...

Tab页的两种写法 - jeesite记录

方法一：

方法二

Tab页的两种写法 - jeesite记录相关推荐

最新文章

热门文章