英文:
A nav pill is selected (active), but the content is not displayed. How come?
问题
Here's the translated content:
所以我想创建一个页面，用于不同类型的用户。也就是说，我不想为管理员创建一个视图，为普通用户创建另一个视图，我想为两者都创建一个视图，并隐藏那些没有管理员权限的用户的某些元素。我编写了这段代码
当这段代码加载到浏览器时，如果我以管理员身份登录，它会变成这样
很酷，对吗？问题
[![enter image description here][1]][1]
有趣的是，我可以单击“用户”选项卡，然后再次单击“管理员”选项卡，内容就会显示出来
[![enter image description here][2]][2]
米老鼠甚至不能这样做，因为他没有选项卡可以再次单击
[![enter image description here][3]][3]
好像JS只关心手动单击，而CSS对“active”属性也没问题
我注意到它们在*w3schools*上使用了`role="tablist"`，但包括该元素并没有帮助
为什么我的选项卡内容不能立即显示？如何修复它？
<!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>
Please note that the translation is provided for the HTML content, and the code parts are preserved as requested.
<details>
<summary>英文:</summary>
So I want to create one page for different types of users. That is, instead of creating a view for ADMIN, another view for USER, I want to have one view for both and hide certain elements from those who lack the ADMIN privilege. I wrote this code
```html
<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>
When this code gets to a browser, it turns into this (if I log in as an ADMIN)
<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>
Cool, huh? The problem
Interestingly, I can click the User tab and then re-click the Admin tab, and the content gets displayed
Mickey Mouse can't do even that since he doesn't have a tab to re-click from
It's as if JS cares only about manual clicks whereas CSS is fine with active attributes too
I noticed that they use role="tablist" with Bootstrap 4 on w3schools. However, including that element didn't help
Why isn't my tab content displayed right away? How do I get it fixed?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
答案1
得分: 1
给#active-tab添加一个active类，这样它将默认显示其内容，问题就解决了。 😁
英文:
Give the #active-tab an active class, and it will display its content by default, and so the problem is solved. 😁
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!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 active">
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论