Thymeleaf+bootstrap 实现tab页，引入不同的html

近期给同事写一个计算器功能，想用bootstrap的tab标签页功能，但是有7个tab页，都写到一个html太乱了，最后结合Thymeleaf的th:replace 实现了该功能。废话不说，上代码

<div class="tabs-container">
     <ul class="nav nav-tabs" id="tab-calu">
         <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 缠绕层</a></li>
         <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">缠绕保护层</a></li>
         <li class=""><a data-toggle="tab" href="#tab-3" aria-expanded="false">纤维树脂重量计算</a></li>
         <li class=""><a data-toggle="tab" href="#tab-4" aria-expanded="false">气瓶容积和重量计算</a></li>
         <li class=""><a data-toggle="tab" href="#tab-5" aria-expanded="false">实际强度发挥系数</a></li>
         <li class=""><a data-toggle="tab" href="#tab-6" aria-expanded="false">瓶口螺纹强度计算</a></li>
         <li class=""><a data-toggle="tab" href="#tab-7" aria-expanded="false">爆破片排放面积计算</a></li>

     </ul>
     <div class="tab-content">
         <div th:replace="airBottleCalcu/tab1 :: tab-1"></div>
         <div th:replace="airBottleCalcu/tab2 :: tab-2"></div>
         <div th:replace="airBottleCalcu/tab3 :: tab-3"></div>
         <div th:replace="airBottleCalcu/tab4 :: tab-4"></div>
         <div th:replace="airBottleCalcu/tab5 :: tab-5"></div>
         <div th:replace="airBottleCalcu/tab6 :: tab-6"></div>
         <div th:replace="airBottleCalcu/tab7 :: tab-7"></div>
     </div>
 </div>

th:replace用法：airBottleCalcu/tab1 html的路径，tab-1 是代码快 替换页tab1写法：

<div id="tab-1" class="tab-pane active" th:fragment="tab-1">
   <div class="panel-body">
   ...
   </div>
</div>

Thymeleaf 不能直接跳转html，用这个替换代码还是很好使的