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

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>