时间戳

首页 > 解决方案 > 隐藏和显示 div 元素无法正常工作

jquery - 隐藏和显示 div 元素无法正常工作

问题描述

我有一个side menu其中有两个buttons。默认情况下，我想查看profile div（现在可以使用）的内容，但是当单击 上的My reviews按钮时sidebar，我想隐藏 的内容， profile div而是显示review div. 但它不起作用。

我有以下代码：

<nav class="side-menu">
    <div class="col-xs-3">
      <ul class="nav nav-tabs tabs-left">
        <li class="active">
         <button id="profilebtn" type="submit">
         <a href="#profile">Profile</a>
         </button>
        </li>
        <li >               
         <form action="/findUserReviews" method="POST">
         <button id="reviewbtn" type="submit" class="">
         <a href="#review"></a>My Review</button>
         </form>
        </li>
     </ul>
   </div>
</nav>

<div id="review" >
  <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" >
    <form class="form-horizontal" th:action="@{/edit_profile}">
        <fieldset class="fieldset">
            <h3 class="fieldset-title">Personal Info</h3>
            ...
        </fieldset>                             
    </form>
</div>

这是我的jquery代码：

    <script >
            $(document).ready(function(){
                 $("#reviewbtn").click(function() {
                   $("#profile").hide();
                   $("#review").show(); 
                 });
                })
    </script>

我得到的是profile默认的 div，这是预期的，但是当我点击My review按钮时，我会在我可以看到的profilediv 的顶部看到这个 div 的结果。当我单击profile按钮时，我再次看到 profile div元素的结果，但它跳到了一点上方。我实际上想在页面的同一位置看到结果，只是必须根据单击的按钮更改内容。

任何帮助表示赞赏。

演示：

$("#reviewbtn").click(function() {
  $("#profile").hide();
  $("#review").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="reviewbtn" type="submit" class=""><a href="#review"></a>My Review</button>
<br/><br/>
<div id="review" style="display:none">
  This is a review div
</div>
<div id="profile">
  This is a profile div
</div>

标签： jqueryhtmltwitter-bootstrap

解决方案

因此，在其他情况下，您必须将 divposition: absolute和父元素都设为position: relative. 这样，两个 div 相互堆叠。但是由于您使用的是hide()哪些集合display: none，它们不使用任何空间。

如果更改 div 的内容，我建议您将两者都放在一个 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>

推荐阅读