contabs.js 的使用

Posted 2020-10-21 书山有路勤为径，学海无涯苦作舟（肖建锋）

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. 效果如图（颜色是我自己定义的，默认不是黑色的）