所以我想为不同类型的用户创建一个页面.也就是说，不是为管理员创建一个视图，而是为用户创建另一个视图，我希望为两者都创建一个视图，并对那些没有管理员权限的人隐藏某些元素.我写了这段代码
<html lang="en" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<!-- ... -->
<div class="row justify-content-center">
<div class="col-sm-1 px-2 pt-1">
<ul class="nav nav-pills flex-column">
<li class="nav-item" sec:authorize="hasAuthority('ADMIN')">
<a th:class="'nav-link' + ${loggedUser.isAdmin() ? ' active' : ''}" data-toggle="pill" href="#admin-tab">Admin</a>
</li>
<li class="nav-item">
<a th:class="'nav-link' + ${!loggedUser.isAdmin() ? ' active' : ''}" data-toggle="pill" href="#user-tab">User</a>
</li>
</ul>
</div>
<div class="col-sm-11 p-0 tab-content">
<div id="admin-tab" class="tab-pane container mw-100 p-0"...>
<div id="user-tab" class="tab-pane container p-0 mx-auto" th:object="${loggedUser}"...>
</div>
</div>
当这段代码到达浏览器时，它会变成这样(如果我以管理员身份登录)
<div class="row justify-content-center">
<div class="col-sm-1 px-2 pt-1">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#admin-tab">Admin</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#user-tab">User</a>
</li>
</ul>
</div>
<div class="col-sm-11 p-0 tab-content">
<div id="admin-tab" class="tab-pane container mw-100 p-0">
<!-- the admin tab content -->
</div>
<div id="user-tab" class="tab-pane container p-0 mx-auto">
<!-- the user tab content -->
</div>
很酷，是吧？问题
有趣的是，我可以单击User选项卡，然后重新单击Admin选项卡，内容就会显示出来
米老鼠甚至做不到这一点，因为他没有可以重新点击的标签
这就好像JS只关心手动点击，而CSS也有active个属性
我注意到他们是use role="tablist"，而Bootstrap 4在w3schools.然而，包括该元素也没有帮助
Why isn't my tab content displayed right away? How do I get it fixed?个
<!DOCTYPE html>
<html lang="en" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Home Page</title>
</head>
<body>
<div class="container mw-100">
<div class="row justify-content-center">
<div class="col-sm-1 px-2 pt-1">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#admin-tab">Admin</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#user-tab">User</a>
</li>
</ul>
</div>
<div class="col-sm-11 p-0 tab-content">
<div id="admin-tab" class="tab-pane container mw-100 p-0">
<p class="text-center">Admin tab content</p>
</div>
<div id="user-tab" class="tab-pane container p-0 mx-auto">
<p class="text-center">User tab content</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>