导航标签已被选中（活动状态），但内容未显示。为什么？

huangapple
go评论89阅读模式
英文:

A nav pill is selected (active), but the content is not displayed. How come?

问题

Here's the translated content:

  1. 所以我想创建一个页面，用于不同类型的用户。也就是说，我不想为管理员创建一个视图，为普通用户创建另一个视图，我想为两者都创建一个视图，并隐藏那些没有管理员权限的用户的某些元素。我编写了这段代码
  1. 当这段代码加载到浏览器时，如果我以管理员身份登录，它会变成这样
  1. 很酷，对吗？问题
  3. [![enter image description here][1]][1]
  5. 有趣的是，我可以单击“用户”选项卡，然后再次单击“管理员”选项卡，内容就会显示出来
  7. [![enter image description here][2]][2]
  9. 米老鼠甚至不能这样做，因为他没有选项卡可以再次单击
  11. [![enter image description here][3]][3]
  13. 好像JS只关心手动单击，而CSS对“active”属性也没问题
  15. 我注意到它们在*w3schools*上使用了`role="tablist"`，但包括该元素并没有帮助
  17. 为什么我的选项卡内容不能立即显示？如何修复它？
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  7.           integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  8.     <title>Home Page</title>
  9. </head>
  10. <body>
  11. <div class="container mw-100">
  12. <div class="row justify-content-center">
  13.         <div class="col-sm-1 px-2 pt-1">
  14.             <ul class="nav nav-pills flex-column">
  15.                 <li class="nav-item">
  16.                     <a class="nav-link active" data-toggle="tab" href="#admin-tab">Admin</a>
  17.                 </li>
  18.                 <li class="nav-item">
  19.                     <a class="nav-link" data-toggle="tab" href="#user-tab">User</a>
  20.                 </li>
  21.             </ul>
  22.         </div>
  23.         <div class="col-sm-11 p-0 tab-content">
  24.             <div id="admin-tab" class="tab-pane container mw-100 p-0">
  25.                 <p class="text-center">Admin tab content</p>
  26.             </div>
  27.             <div id="user-tab" class="tab-pane container p-0 mx-auto">
  28.                 <p class="text-center">User tab content</p>
  29.             </div>
  30.          </div>
  31.      </div>
  32. </div>
  33. <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
  34. <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  35. <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
  36. </body>
  37. </html>
  2. Please note that the translation is provided for the HTML content, and the code parts are preserved as requested.
  3. <details>
  4. <summary>英文:</summary>
  5. 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
  6. ```html
  7. &lt;html lang=&quot;en&quot; xmlns:sec=&quot;http://www.thymeleaf.org/thymeleaf-extras-springsecurity3&quot;&gt;
  8. &lt;!-- ... --&gt;
  9. &lt;div class=&quot;row justify-content-center&quot;&gt;
  10. &lt;div class=&quot;col-sm-1 px-2 pt-1&quot;&gt;
  11. &lt;ul class=&quot;nav nav-pills flex-column&quot;&gt;
  12. &lt;li class=&quot;nav-item&quot; sec:authorize=&quot;hasAuthority(&#39;ADMIN&#39;)&quot;&gt;
  13. &lt;a th:class=&quot;&#39;nav-link&#39; + ${loggedUser.isAdmin() ? &#39; active&#39; : &#39;&#39;}&quot; data-toggle=&quot;pill&quot; href=&quot;#admin-tab&quot;&gt;Admin&lt;/a&gt;
  14. &lt;/li&gt;
  15. &lt;li class=&quot;nav-item&quot;&gt;
  16. &lt;a th:class=&quot;&#39;nav-link&#39; + ${!loggedUser.isAdmin() ? &#39; active&#39; : &#39;&#39;}&quot; data-toggle=&quot;pill&quot; href=&quot;#user-tab&quot;&gt;User&lt;/a&gt;
  17. &lt;/li&gt;
  18. &lt;/ul&gt;
  19. &lt;/div&gt;
  20. &lt;div class=&quot;col-sm-11 p-0 tab-content&quot;&gt;
  21. &lt;div id=&quot;admin-tab&quot; class=&quot;tab-pane container mw-100 p-0&quot;...&gt;
  22. &lt;div id=&quot;user-tab&quot; class=&quot;tab-pane container p-0 mx-auto&quot; th:object=&quot;${loggedUser}&quot;...&gt;
  23. &lt;/div&gt;
  24. &lt;/div&gt;

When this code gets to a browser, it turns into this (if I log in as an ADMIN)

  1. &lt;div class=&quot;row justify-content-center&quot;&gt;
  2.         &lt;div class=&quot;col-sm-1 px-2 pt-1&quot;&gt;
  3.             &lt;ul class=&quot;nav nav-pills flex-column&quot;&gt;
  4.                 &lt;li class=&quot;nav-item&quot;&gt;
  5.                     &lt;a class=&quot;nav-link active&quot; data-toggle=&quot;tab&quot; href=&quot;#admin-tab&quot;&gt;Admin&lt;/a&gt;
  6.                 &lt;/li&gt;
  7.                 &lt;li class=&quot;nav-item&quot;&gt;
  8.                     &lt;a class=&quot;nav-link&quot; data-toggle=&quot;tab&quot; href=&quot;#user-tab&quot;&gt;User&lt;/a&gt;
  9.                 &lt;/li&gt;
  10.             &lt;/ul&gt;
  11.         &lt;/div&gt;
  12.         &lt;div class=&quot;col-sm-11 p-0 tab-content&quot;&gt;
  13.             &lt;div id=&quot;admin-tab&quot; class=&quot;tab-pane container mw-100 p-0&quot;&gt;
  14.                 &lt;!-- the admin tab content --&gt;
  15.             &lt;/div&gt;
  16.             &lt;div id=&quot;user-tab&quot; class=&quot;tab-pane container p-0 mx-auto&quot;&gt;
  17.                 &lt;!-- the user tab content --&gt;
  18.             &lt;/div&gt;

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=&quot;tablist&quot; 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 -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot; xmlns:sec=&quot;http://www.thymeleaf.org/thymeleaf-extras-springsecurity3&quot;&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;UTF-8&quot;&gt;
  5. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
  6. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot;
  7. integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot; crossorigin=&quot;anonymous&quot;&gt;
  8. &lt;title&gt;Home Page&lt;/title&gt;
  9. &lt;/head&gt;
  10. &lt;body&gt;
  11. &lt;div class=&quot;container mw-100&quot;&gt;
  12. &lt;div class=&quot;row justify-content-center&quot;&gt;
  13. &lt;div class=&quot;col-sm-1 px-2 pt-1&quot;&gt;
  14. &lt;ul class=&quot;nav nav-pills flex-column&quot;&gt;
  15. &lt;li class=&quot;nav-item&quot;&gt;
  16. &lt;a class=&quot;nav-link active&quot; data-toggle=&quot;tab&quot; href=&quot;#admin-tab&quot;&gt;Admin&lt;/a&gt;
  17. &lt;/li&gt;
  18. &lt;li class=&quot;nav-item&quot;&gt;
  19. &lt;a class=&quot;nav-link&quot; data-toggle=&quot;tab&quot; href=&quot;#user-tab&quot;&gt;User&lt;/a&gt;
  20. &lt;/li&gt;
  21. &lt;/ul&gt;
  22. &lt;/div&gt;
  23. &lt;div class=&quot;col-sm-11 p-0 tab-content&quot;&gt;
  24. &lt;div id=&quot;admin-tab&quot; class=&quot;tab-pane container mw-100 p-0&quot;&gt;
  25. &lt;p class=&quot;text-center&quot;&gt;Admin tab content&lt;/p&gt;
  26. &lt;/div&gt;
  27. &lt;div id=&quot;user-tab&quot; class=&quot;tab-pane container p-0 mx-auto&quot;&gt;
  28. &lt;p class=&quot;text-center&quot;&gt;User tab content&lt;/p&gt;
  29. &lt;/div&gt;
  30. &lt;/div&gt;
  31. &lt;/div&gt;
  32. &lt;/div&gt;
  33. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js&quot;&gt;&lt;/script&gt;
  34. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js&quot;&gt;&lt;/script&gt;
  35. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
  36. &lt;/body&gt;
  37. &lt;/html&gt;

<!-- 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 -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot; xmlns:sec=&quot;http://www.thymeleaf.org/thymeleaf-extras-springsecurity3&quot;&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;UTF-8&quot;&gt;
  5. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
  6. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot;
  7. integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot; crossorigin=&quot;anonymous&quot;&gt;
  8. &lt;title&gt;Home Page&lt;/title&gt;
  9. &lt;/head&gt;
  10. &lt;body&gt;
  11. &lt;div class=&quot;container mw-100&quot;&gt;
  12. &lt;div class=&quot;row justify-content-center&quot;&gt;
  13. &lt;div class=&quot;col-sm-1 px-2 pt-1&quot;&gt;
  14. &lt;ul class=&quot;nav nav-pills flex-column&quot;&gt;
  15. &lt;li class=&quot;nav-item&quot;&gt;
  16. &lt;a class=&quot;nav-link active&quot; data-toggle=&quot;tab&quot; href=&quot;#admin-tab&quot;&gt;Admin&lt;/a&gt;
  17. &lt;/li&gt;
  18. &lt;li class=&quot;nav-item&quot;&gt;
  19. &lt;a class=&quot;nav-link&quot; data-toggle=&quot;tab&quot; href=&quot;#user-tab&quot;&gt;User&lt;/a&gt;
  20. &lt;/li&gt;
  21. &lt;/ul&gt;
  22. &lt;/div&gt;
  23. &lt;div class=&quot;col-sm-11 p-0 tab-content&quot;&gt;
  24. &lt;div id=&quot;admin-tab&quot; class=&quot;tab-pane container mw-100 p-0 active&quot;&gt;
  25. &lt;p class=&quot;text-center&quot;&gt;Admin tab content&lt;/p&gt;
  26. &lt;/div&gt;
  27. &lt;div id=&quot;user-tab&quot; class=&quot;tab-pane container p-0 mx-auto&quot;&gt;
  28. &lt;p class=&quot;text-center&quot;&gt;User tab content&lt;/p&gt;
  29. &lt;/div&gt;
  30. &lt;/div&gt;
  31. &lt;/div&gt;
  32. &lt;/div&gt;
  33. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js&quot;&gt;&lt;/script&gt;
  34. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js&quot;&gt;&lt;/script&gt;
  35. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
  36. &lt;/body&gt;
  37. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月7日 05:06:54
  • 转载请务必保留本文链接：https://go.coder-hub.com/75953795.html
  • bootstrap-4
  • css
  • html
  • jquery
  • spring-boot
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定