隐藏和显示 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(){

                 $("#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>

Answer 2

因此，在其他情况下，您必须将 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>