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

Question

我有一个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按钮时，我会在我可以看到的 div 的结果之上看到该 div 的结果profile。当我单击按钮时profile，我再次看到该 profile div元素的结果，但它跳到了上面一点。我实际上想在页面的同一位置查看结果，只是内容必须根据单击的按钮进行更改。

任何帮助表示赞赏。

Answer 1

我使用CSS显示并且它有效。注意：我将 reviewbtn 类型更改为按钮，因为它是提交类型并且它正在尝试提交某些内容。如果你只是需要它来运行 JS，则不能使用提交按钮。还更改了个人资料按钮，以便您可以后退和前进以进行演示。$(document).ready(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#reviewbtn").click(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#profile").css("display", "none");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#review").css("display", "block");&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#profilebtn").click(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#profile").css("display", "block");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#review").css("display", "none");&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><nav class="side-menu">&nbsp; &nbsp; <div class="col-xs-3">&nbsp; &nbsp; &nbsp; <ul class="nav nav-tabs tabs-left">&nbsp; &nbsp; &nbsp; &nbsp; <li class="active">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<button id="profilebtn" type="button">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a href="#profile">Profile</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</button>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<form action="/findUserReviews" method="POST">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<button id="reviewbtn" type="button" class="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a href="#review"></a>My Review</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</form>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp;</ul>&nbsp; &nbsp;</div></nav><div id="review" style="display:none">&nbsp; <table>&nbsp; &nbsp;<tbody>&nbsp; &nbsp; &nbsp; &nbsp; <tr th:each="review: ${reviews}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <form th:action="@{/edit_review}" method="post">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="underline font-weight-bold"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; th:text="${review.place.id}" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="submit" class="edit" name="action"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value="edit">Edit</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</form>&nbsp; &nbsp; &nbsp; &nbsp;</tr>&nbsp; &nbsp; </tbody>&nbsp; </table></div><div id="profile" style="display:block">&nbsp; &nbsp; <form class="form-horizontal" th:action="@{/edit_profile}">&nbsp; &nbsp; &nbsp; &nbsp; <fieldset class="fieldset">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="fieldset-title">Personal Info</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; </fieldset>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; </form></div>

Answer 2

因此，在其他情况下，您必须将 divposition: absolute和父元素都设置为position: relative. 这样两个 div 就会相互堆叠。但由于您使用的是hide()哪些集合，display: none所以它们不使用任何空间。如果更改 div 的内容，我建议您将两者都放在 div 中。我不太确定这个代码片段是否是您想要的，请告诉我您是否需要更多。$("#reviewbtn").click(function() {&nbsp; $("#profile").hide();&nbsp; $("#review").show();});$("#profilebtn").click(function() {&nbsp; $("#review").hide();&nbsp; $("#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">&nbsp; &nbsp; <div id="review" style="display: none; background: red;">&nbsp; &nbsp; &nbsp; &nbsp; This is a review div&nbsp; &nbsp; </div>&nbsp; &nbsp; <div id="profile" style="display: block; background: blue;">&nbsp; &nbsp; &nbsp; &nbsp; This is a profile div&nbsp; &nbsp; </div></div>