1. 先下载两个文件

https://files.cnblogs.com/files/xiaojf/style.css
https://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 的使用的更多相关文章

  1. H+ 编辑tab页 保存后 刷新列表tab页 并关闭自已。tabA页调用tabB页的方法

    //注:在contabs.js文件中 $(function () { }); 方法外 加入 //注: data-name="' + menuName + '" 这句是加入的自定义属 ...

  2. H+ 显示并激活menuTab 根据tabName

    //注:在contabs.js文件中 $(function () { }); 方法外 加入//注: data-name="' + menuName + '" 这句是加入的自定义属性 ...

  3. H+ 关闭menuTab页面

    //注:在contabs.js文件中 $(function () { }); 方法外 加入//注: data-name="' + menuName + '" 这句是加入的自定义属性 ...

  4. H+ 添加(新增)Tab选项卡

    //注:在contabs.js文件中 $(function () { }); 方法外 加入//注: data-name="' + menuName + '" 这句是加入的自定义属性 ...

  5. Django中使用后台网站模板

    背景: 一直想自己开发一个网站,但是前端知识又不多,好在有模板可以使用,下载地址:https://download.csdn.net/download/wjgccsdn/10843808 开干:   ...

  6. 上传图片,语音,和富文本(webuploader,dropzone, froala)

    首先是上传图片,使用的百度webuploader 自己修改后可以实例化多个uploader对象: HTML: <!DOCTYPE html> <html xmlns="ht ...

  7. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  8. js学习笔记:操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  9. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

随机推荐

  1. NATS_07:NATS之top工具监控以及测量调优工具

    概述 你可以使用 nats-top 来实现类似于 linux 中 top 命令的实时监控 nats 服务: 可以使用 nats 提供的工具来进行针对性的调优. 安装nats-top $ go get ...

  2. 开始 Dojo 开发

    原文出处:Joe Lennon 从头开始学习 Dojo,第 1 部分 开始 Dojo 开发 Dojo Toolkit 简介 Dojo 于 2004 年创建,使开发 DHTML 和 JavaScript ...

  3. Hadoop生态圈-Hbase过滤器(Filter)

    Hadoop生态圈-Hbase过滤器(Filter) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.

  4. 缓存失效策略(FIFO,LRU,LFU)

    当缓存需要被清理时(比如空间占用已经接近临界值了),需要使用某种淘汰算法来决定清理掉哪些数据.常用的淘汰算法有下面几种: 1. FIFO:First In First Out,先进先出.判断被存储的时 ...

  5. bzoj千题计划171:bzoj2456: mode

    http://www.lydsy.com/JudgeOnline/problem.php?id=2456 任意删除序列中两个不同的数,众数仍然是众数 不停的删,剩下的最后的数一定是众数 具体实现: 记 ...

  6. 2016/1/3 Python中的多线程(2):threading模块

    之前提了Python多线程的一点使用,今天介绍更好的threading模块,它提供了Thread类和一些比较好用的同步机制. 先介绍Thread类 threading模块中的Thread类有很多thr ...

  7. JAVA 急速WEB框架Blast-本人开发的JavaWeb急速框架Blast上线了

    JAVA 急速WEB框架Blast ——对JavaWeb的学习性框架,参考了spring的实现 ——阅读Blast源码可以快速掌握JavaWeb常用技术和方法论,并付诸实践 Blast 是基于 Jav ...

  8. R5—字符串处理/正则表达式

    R通常被用来进行数值计算比较多,字符串处理相对较少,而且关于字符串的函数也不多,用得多的就是substr.strsplit.paste.regexpr这几个了.实际上R关于字符串处理的功能是非常强大的 ...

  9. Getting Real 摘记

    第二章 起始点 一个很好的做软件的方式就是一开始用它来解决你自己的问题.由于你自己变成了软件的目标受众因此你会知道什么是重要的什么不是.这样做下去将会是推出一个突破性产品的伟大起始点. 手头有多少钱就 ...

  10. shell if判断中常用的a-z表达式含义

    shell if判断中常用的a-z表达式含义 可通过在在linux中man test命令查看下列参数的详细用法   [ -a FILE ] 如果 FILE 存在则为真. [ -b FILE ] 如果 ...