單擊后如何加載特定片段？
[英]How to load specific fragment after click?
問題描述
我是 thymeleaf 的初學者。 我試圖在點擊后加載特定的 div。 這是我的演示：
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <body> <ul class="list-unstyled components mb-5"> <li > <a href="#"><span class="fas fa-sign-in-alt mr-3"></span> load fragment 1</a> </li> <li class="active"> <a href="#"><span class="fa fa-database mr-3"></span> load fragment 2</a> </li> <li > <a href="#"><span class="fa fa-user mr-3"></span> load fragment 3</a> </li> </ul> <div th:if="#{ ? }"> <div th:replace="admin/fragment1.html :: fragment1"></div> </div> <div th:if="#{ ? }"> <div th:replace="admin/fragment2.html :: fragment2"></div> </div> <div th:if="#{ ? }"> <div th:replace="admin/fragment3.html :: fragment3"></div> </div> </body>
如果您查看代碼，您可能會明白我的想法，但我不確定這是否可行？
如果 button1 處於活動狀態，我想加載 fragment1，如果 button2 處於活動狀態，則加載 fragment2。 各位大俠怎么查？ 我正在嘗試，但沒有任何效果。
1 個解決方案
解決方案1
2 已采納 2020-01-15 05:21:22
這是您正在尋找的類似行為嗎
https://getbootstrap.com/docs/4.3/components/collapse/#accordion-example
從引導站點
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Collapsible Group Item #1 </button> </h2> </div> <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample" style=""> <div class="card-body"> Section 1 expansion </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </button> </h2> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample" style=""> <div class="card-body"> Section 2 expansion </div> </div> </div> <div class="card"> <div class="card-header" id="headingThree"> <h2 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree"> Collapsible Group Item #3 </button> </h2> </div> <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordionExample" style=""> <div class="card-body"> Section 3 expansion </div> </div> </div> </div>
使用 JavaScript 加載頁面后，如何在用戶單擊時在特定 li 上添加活動類
[英]How to add active class on specific li on user click after page load using JavaScript
Angular JS：如何在按鈕單擊后在特定元素中加載 angular js 部分視圖頁面
[英]Angular JS: How to load angular js partial view page in specific element after button click
停止從頁面上加載特定內容，然后在單擊超鏈接以處理頁面上的數據后專門加載它
[英]Stop specific content from loading on page then Load it specifically after click on hyperlink to handle load of data on page
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.