gpt4 book ai didi

javascript - 点击后如何加载特定片段?

转载 作者:行者123 更新时间:2023-11-30 01:41:37 25 4
gpt4 key购买 nike

我是 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>

如果您查看代码,您可能会明白我的想法,但我不确定这是否可能?

如果按钮1处于 Activity 状态,我希望加载fragment1,如果按钮2处于 Activity 状态,我希望加载fragment2。大佬们这个怎么查啊?我正在尝试,但没有任何效果。

最佳答案

这是否是您正在寻找的类似行为

https://getbootstrap.com/docs/4.3/components/collapse/#accordion-example

来自 Bootstrap 网站

<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 - 点击后如何加载特定片段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59745072/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com