2 回答

TA貢獻(xiàn)2037條經(jīng)驗(yàn) 獲得超6個贊
我使用CSS顯示并且它有效。注意:我將 reviewbtn 類型更改為按鈕,因?yàn)樗翘峤活愋筒⑶宜趪L試提交某些內(nèi)容。如果你只是需要它來運(yùn)行 JS,則不能使用提交按鈕。
還更改了個人資料按鈕,以便您可以后退和前進(jìn)以進(jìn)行演示。
$(document).ready(function(){
$("#reviewbtn").click(function() {
$("#profile").css("display", "none");
$("#review").css("display", "block");
});
$("#profilebtn").click(function() {
$("#profile").css("display", "block");
$("#review").css("display", "none");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="side-menu">
<div class="col-xs-3">
<ul class="nav nav-tabs tabs-left">
<li class="active">
<button id="profilebtn" type="button">
<a href="#profile">Profile</a>
</button>
</li>
<li >
<form action="/findUserReviews" method="POST">
<button id="reviewbtn" type="button" class="">
<a href="#review"></a>My Review</button>
</form>
</li>
</ul>
</div>
</nav>
<div id="review" style="display:none">
<table>
<tbody>
<tr th:each="review: ${reviews}">
<form th:action="@{/edit_review}" method="post">
<td class="underline font-weight-bold"
th:text="${review.place.id}" />
<td>
<button type="submit" class="edit" name="action"
value="edit">Edit</button>
</td>
</form>
</tr>
</tbody>
</table>
</div>
<div id="profile" style="display:block">
<form class="form-horizontal" th:action="@{/edit_profile}">
<fieldset class="fieldset">
<h3 class="fieldset-title">Personal Info</h3>
...
</fieldset>
</form>
</div>

TA貢獻(xiàn)1852條經(jīng)驗(yàn) 獲得超1個贊
因此,在其他情況下,您必須將 divposition: absolute和父元素都設(shè)置為position: relative. 這樣兩個 div 就會相互堆疊。但由于您使用的是hide()哪些集合,display: none所以它們不使用任何空間。
如果更改 div 的內(nèi)容,我建議您將兩者都放在 div 中。
我不太確定這個代碼片段是否是您想要的,請告訴我您是否需要更多。
$("#reviewbtn").click(function() {
$("#profile").hide();
$("#review").show();
});
$("#profilebtn").click(function() {
$("#review").hide();
$("#profile").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="profilebtn" type="submit" class=""><a href="#review"></a>Profile</button>
<button id="reviewbtn" type="submit" class=""><a href="#review"></a>My Review</button>
<div id="SomeWrapper">
<div id="review" style="display: none; background: red;">
This is a review div
</div>
<div id="profile" style="display: block; background: blue;">
This is a profile div
</div>
</div>
- 2 回答
- 0 關(guān)注
- 198 瀏覽
添加回答
舉報