如何用JavaScript和Thymeleaf实现Bootstrap标签页激活状态

我帮你分析下代码里的几个核心问题，然后给出针对性的修复方案：

问题1：JavaScript选择器与事件绑定错误 #

你的JS代码里尝试操作li元素，但你的List Group结构里根本没有<li>标签，激活类是加在<a>标签上的。而且你把点击事件绑定在了外层的<span>上，实际用户点击的是里面的<a>标签，这直接导致状态切换逻辑失效。

问题2：缺少Bootstrap JavaScript依赖 #

Bootstrap的data-toggle="list"原生功能需要依赖jQuery（Bootstrap 4版本）和Bootstrap JS文件，你目前只引入了CSS，没有这些JS支持，原生切换逻辑自然无法生效。

修复后的完整代码 #

我保留了你的Thymeleaf和Spring Security相关代码，只修改了关键问题点：

<!doctype html>
<html lang="en" th:replace="~{mopslayout :: html(name='Klausurzulassung', headcontent=~{:: headcontent}, navigation=~{:: navigation}, bodycontent=~{:: bodycontent})}" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4" xmlns:th="http://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<th:block th:fragment="headcontent">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<!-- Bootstrap CSS -->
<link href="../static/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" th:href="@{node_modules/bootstrap/dist/css/bootstrap.min.css}">
<!-- 引入jQuery和Bootstrap JS（必须顺序：先jQuery后Bootstrap） -->
<script src="../static/node_modules/jquery/dist/jquery.min.js" th:src="@{node_modules/jquery/dist/jquery.min.js}"></script>
<script src="../static/node_modules/bootstrap/dist/js/bootstrap.min.js" th:src="@{node_modules/bootstrap/dist/js/bootstrap.min.js}"></script>
</th:block>
<title>Base Template</title>
</head>
<body>
<header>
<nav class="navigation navigation-secondary" is="mops-navigation" th:fragment="navigation">
<div class="list-group" id="myList" role="tablist">
<span sec:authorize="hasRole('orga')">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#zulassungsliste" role="tab" th:href="@{/zulassung2/orga/upload-csv}">Zulassungsliste hochladen</a>
</span>
<span sec:authorize="hasRole('orga')">
<a class="list-group-item list-group-item-action" data-toggle="list" href="quittungenValidieren" role="tab" th:href="@{/zulassung2/orga/upload-receipt}">Quittungen validieren</a>
</span>
<span sec:authorize="hasRole('studentin')">
<a class="list-group-item list-group-item-action" data-toggle="list" href="studiseite" role="tab" th:href="@{/zulassung2/studi}">Studiseite</a>
</span>
</div>
</nav>
</header>
<script>
$(function () {
    console.log('ready');
    // 绑定到实际可点击的a标签上
    $('.list-group a.list-group-item-action').click(function (e) {
        // 如果需要保留页面跳转，就注释掉这行（但刷新后active状态会重置）
        // e.preventDefault();
        
        // 移除所有列表项的active类
        $('.list-group a.list-group-item-action').removeClass('active');
        // 给当前点击的项添加active类
        $(this).addClass('active');
    });
})
</script>
<main th:fragment="bodycontent">
<div th:replace="${content} ?: ~{}"></div>
</main>
</body>
</html>

关键修改说明 #

• 补全JS依赖：添加了jQuery和Bootstrap JS，确保Bootstrap原生功能和自定义JS都能正常运行。
• 修正事件与选择器：把点击事件绑定到<a>标签上，操作的是实际承载active类的元素，不再找不存在的li。
• 状态切换逻辑优化：先清空所有项的激活状态，再给当前项添加，确保状态唯一。

另外提醒下：如果点击<a>会跳转到新页面，页面刷新后active状态会重置。这种场景下，你需要在后端通过Thymeleaf根据当前请求URL，动态给对应的<a>标签添加active类，才能保证页面加载时的激活状态正确。

内容的提问来源于stack exchange，提问作者NewCodeer