1. 先下载两个文件
https://files.cnblogs.com/files/xiaojf/style.csshttps://files.cnblogs.com/files/xiaojf/contabs.js
2. 引入文件
<link rel="stylesheet" href="/modules/index/css/index.css"><script type="text/javascript" src="/plugins/contabs/contabs.js"></script>
3. 在HTML中 需要如下代码片段，缺一不可
<div class="row content-tabs"> ???????????????????????????<button class="roll-nav roll-left J_tabLeft"><i class="fa fa-backward"></i> ???????????????????????????</button> ???????????????????????????<nav class="page-tabs J_menuTabs"> ???????????????????????????????<div class="page-tabs-content"> ???????????????????????????????????<a href="javascript:;" class="active J_menuTab" data-id="index_v1.html">登录日志</a> ???????????????????????????????</div> ???????????????????????????</nav> ???????????????????????????<button class="roll-nav roll-right J_tabRight"><i class="fa fa-forward"></i> ???????????????????????????</button> ???????????????????????????<div class="btn-group roll-nav roll-right"> ???????????????????????????????<button class="dropdown J_tabClose" data-toggle="dropdown">关闭操作<span class="caret"></span> ???????????????????????????????</button> ???????????????????????????????<ul role="menu" class="dropdown-menu dropdown-menu-right"> ???????????????????????????????????<li class="J_tabShowActive"><a>定位当前选项卡</a> ???????????????????????????????????</li> ???????????????????????????????????<li class="divider"></li> ???????????????????????????????????<li class="J_tabCloseAll"><a>关闭全部选项卡</a> ???????????????????????????????????</li> ???????????????????????????????????<li class="J_tabCloseOther"><a>关闭其他选项卡</a> ???????????????????????????????????</li> ???????????????????????????????</ul> ???????????????????????????</div> ???????????????????????</div> ???????????????????????<div class="row J_mainContent" id="content-main"> ???????????????????????????<iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="/sys/operLog/login" frameborder="0" data-id="index_v1.html" seamless></iframe> ???????????????????????</div>
3. 在你的<a> 标签中添加样式 J_menuItem
<li class="nav-item"> ???????????????????????????????????????<a href="/sys/user" class="nav-link J_menuItem"> ???????????????????????????????????????????<i class="fa fa-address-book"></i> ???????????????????????????????????????????<span class="title">用户管理</span> ???????????????????????????????????????</a> ???????????????????????????????????</li>
4. 效果如图（颜色是我自己定义的，默认不是黑色的）
contabs.js 的使用
原文地址：https://www.cnblogs.com/xiaojf/p/8306734.html