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>
