thymeleaf实现选项卡切换

Thymeleaf 是一个用于 Web 和独立环境的现代服务器端 Java 模板引擎。它能够处理 HTML、XML、JavaScript、CSS 甚至纯文本。

要实现选项卡切换，可以使用 Thymeleaf 结合 Bootstrap 的 Tabs 组件来实现。以下是一个简单的示例：

1. 在 HTML 中引入 Bootstrap 的 CSS 和 JS 文件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2. 创建选项卡组件：

<div class="container">
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
        <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
        <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
        <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
    </ul>
    <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
            <h3>Home</h3>
            <p>Some content.</p>
        </div>
        <div id="menu1" class="tab-pane fade">
            <h3>Menu 1</h3>
            <p>Some content in menu 1.</p>
        </div>
        <div id="menu2" class="tab-pane fade">
            <h3>Menu 2</h3>
            <p>Some content in menu 2.</p>
        </div>
        <div id="menu3" class="tab-pane fade">
            <h3>Menu 3</h3>
            <p>Some content in menu 3.</p>
        </div>
    </div>
</div>

3. 使用 Thymeleaf 进行数据绑定：

<div class="container">
    <ul class="nav nav-tabs">
        <li th:class="${activeTab == 'home' ? 'active' : ''}"><a data-toggle="tab" th:href="@{/home}" th:text="#{home}">Home</a></li>
        <li th:class="${activeTab == 'menu1' ? 'active' : ''}"><a data-toggle="tab" th:href="@{/menu1}" th:text="#{menu1}">Menu 1</a></li>
        <li th:class="${activeTab == 'menu2' ? 'active' : ''}"><a data-toggle="tab" th:href="@{/menu2}" th:text="#{menu2}">Menu 2</a></li>
        <li th:class="${activeTab == 'menu3' ? 'active' : ''}"><a data-toggle="tab" th:href="@{/menu3}" th:text="#{menu3}">Menu 3</a></li>
    </ul>
    <div class="tab-content">
        <div id="home" class="tab-pane fade in th:classappend="${activeTab == 'home' ? 'active' : ''}">
            <h3>Home</h3>
            <p>Some content.</p>
        </div>
        <div id="menu1" class="tab-pane fade th:classappend="${activeTab == 'menu1' ? 'active' : ''}">
            <h3>Menu 1</h3>
            <p>Some content in menu 1.</p>
        </div>
        <div id="menu2" class="tab-pane fade th:classappend="${activeTab == 'menu2' ? 'active' : ''}">
            <h3>Menu 2</h3>
            <p>Some content in menu 2.</p>
        </div>
        <div id="menu3" class="tab-pane fade th:classappend="${activeTab == 'menu3' ? 'active' : ''}">
            <h3>Menu 3</h3>
            <p>Some content in menu 3.</p>
        </div>
    </div>
</div>

在这个示例中，我们使用 Thymeleaf 的条件表达式来动态绑定选项卡的状态。具体来说，我们使用 `activeTab` 变量来指示当前选项卡的状态，然后使用 `th:class` 属性来动态控制选项卡的样式。同时，我们还使用 `th:href` 和 `th:text` 属性来分别绑定选项卡的链接和文本内容。

注意，在这个示例中，我们假设 `activeTab` 变量是从后端控制器传递到前端页面的。你需要相应地在你的应用程序中进行修改，以适应你的具体需求。