龙空技术网

AdminLTE3 右侧界面使用TAB加载其他页面

PEK5SHL 1604

前言:

现在你们对“jquerytab加载”大致比较关怀,小伙伴们都需要了解一些“jquerytab加载”的相关知识。那么小编也在网摘上汇集了一些关于“jquerytab加载””的相关文章,希望小伙伴们能喜欢,同学们快快来了解一下吧!

HTML

<!-- Content Wrapper. Contains page content --><section class = "content-header">    <div class = "container-fluid">        <div class = "row mb-2">            <div class = "col-sm-6">                <h1>Inbuilding Analyse-Basic Setup</h1>            </div>        </div>    </div><!-- /.container-fluid --></section><!-- Main content --><section class = "content">    <div class = "container-fluid">        <div class = "row">            <div class = "col-md-12">                <div class = "card">                    <div class = "card-header p-2">                        <ul class = "nav nav-tabs">                            <li class = "nav-item"><a class = "nav-link active" href = "javascript:void(0)"                                                      data-toggle = "tab"                                                      link = "child_page/inb_basic_task.html">Task Maintaince</a></li>//默认加载的页面a class里要加active                            <li class = "nav-item"><a class = "nav-link" href = "javascript:void(0)" data-toggle = "tab"                                                      link = "链接1">Coverage</a>                            </li>                            <li class = "nav-item"><a class = "nav-link" href = "javascript:void(0)" data-toggle = "tab"                                                      link = "链接2">Sort Maintaince</a>                            </li>                            <li class = "nav-item"><a class = "nav-link" href = "javascript:void(0)" data-toggle = "tab"                                                      link = "链接3">H/C Identify</a>                            </li>                            <li class = "nav-item"><a class = "nav-link" href = "javascript:void(0)" data-toggle = "tab"                                                      link = "链接4">Report List</a>                            </li>                        </ul>                    </div><!-- /.card-header -->                    <div class = "card-body">                        <div class = "tab-content">                            <div class = "active tab-pane" id = "pane">//这里放TAB加载的页面                            </div>                            <!-- /.tab-pane -->                        </div>                        <!-- /.tab-content -->                    </div><!-- /.card-body -->                </div>                <!-- /.nav-tabs-custom -->            </div>            <!-- /.col -->        </div>        <!-- /.row -->    </div><!-- /.container-fluid --></section>

Jquery

<script>    $(function () {        $('ul.nav-tabs a').click(function () {           //这里要特别注意一个坑,就是左侧菜单原来用的也是nav-pills, 如果这里的TAB用的也是nav-pills          //会造成点击了TAB,左侧菜单高亮会消失。。。所以换了一种class            var li = $('ul.nav-tabs a');            li.removeClass('active');            $(this).addClass('active');        });//添加TAB高亮        $('ul.nav-tabs a').click(function () {            var url = $(this).attr('link');            $('#pane').load(url);        }); //给TAB的内容加载页面        $('ul.nav-tabs a').get(0).click(); //这里设定打开这个页面,默认tab加载哪一个,从0开始    })</script>

标签: #jquerytab加载 #js打开浏览器新的tab页 #html加载其他页面