Question

在users.html上，有主要和行业标签。当我加载users.html时，我希望加载行业标签。我该怎么做？

<div class='tabs-x tabs-above tabs-krajee'>
    <ul id="myTab-tabs-above" class="nav nav-tabs" role="tablist">
        <li class="active">
            <a href="#home-tabs" role="tab" data-toggle="tab">Main</a></li>
        <li><a href="#users-tabs" role="tab" data-toggle="tab">Industries</a></li>
    </ul>

    <!-- Tab content refers to this part -->
    <div id="tabs-content" class="tab-content">
        <div id="home-tabs" class="tab-pane fade in active">
            <div th:include="fragments/admin/companyProfile::companyProfile(${currentAccountant})"></div>
        </div>

         <div id="users-tabs" class="tab-pane fade">
             <div th:include="fragments/admin/users::users">a</div>
         </div>
    </div>
</div>

以下代码加载userDetails但我希望在加载时选择特定的选项卡。我该怎么做？

@RequestMapping(value = "/load", method = RequestMethod.GET)
public ModelAndView load() {
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.setViewName("userDetails");
    return modelAndView;
}

Answer 1

您需要在文档加载时触发标签显示。

检查documentation

<div class='tabs-x tabs-above tabs-krajee'>
    <ul id="myTab-tabs-above" class="nav nav-tabs" role="tablist">
        <li class="active">
            <a href="#home-tabs" role="tab" data-toggle="tab">Main</a></li>
        <li><a href="#users-tabs" role="tab" data-toggle="tab">Industries</a></li>
    </ul>

    <!-- Tab content refers to this part -->
    <div id="tabs-content" class="tab-content">
        <div id="home-tabs" class="tab-pane fade in active">
            <div th:include="fragments/admin/companyProfile::companyProfile(${currentAccountant})"></div>
        </div>

         <div id="users-tabs" class="tab-pane fade">
             <div th:include="fragments/admin/users::users">a</div>
         </div>
    </div>
</div>
<script th:inline="javascript">
    var tabToSelect = "users-tabs";
    $(document).ready(function() {
        $('#myTab-tabs-above a[href="#'+tabToSelect+'"]').tab('show')
    });
</script>

Answer 2

您未指定要选择的标签。您如何分离添加Main和行业的逻辑。在控制器中如果你想显示MainTab

modelAndView.addObject("mainTabAddOrNot","show");

，否则

 modelAndView.addObject("mainTabAddOrNot",null);

在Thymeleaf方面：

<li th:if="$(mainTabAddOrNot)" >
     <a href="#home-tabs" role="tab" data-toggle="tab">Main</a></li>
    <li><a href="#users-tabs" role="tab" data-toggle="tab">Industries</a></li>

这只是一个例子，可以使用百里香的条件来添加特定的标签。希望它会给你一个想法。

Answer 3

无需更改您的控制器代码，也无需更改javascript。只需将标签设置为活动即可。另外，您还必须将行业标签设置为活动。

<a class="list-group-item list-group-item-action active" data-toggle="list" href="#industries"
                       role="tab">
                        Industries Tab Data
 </a>
 
 
  <div class="tab-pane fade show active" id="industries" role="tabpanel">

spring thymeleaf：打电话给特定标签

3 个答案: