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按钮时，我在{{1 }} div。当我单击profile按钮时，我再次看到仅profile profile元素的结果，但是它跳到了较高的位置。我实际上想在页面的同一位置看到结果，只是必须根据单击的按钮更改内容。

感谢您的帮助。

演示：

div

$("#reviewbtn").click(function() {
  $("#profile").hide();
  $("#review").show();
});

Answer 1

我使用CSS显示，并且可以正常工作。注意：我将reviewbtn类型更改为button，因为它是提交类型，并且正在尝试提交某些内容。如果只需要运行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

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

Answer 3

我建议使用.toggle() jQuery方法在显示/隐藏元素之间切换：

$("#reviewbtn").click(function() {
  $("#profile").toggle();
  $("#review").toggle();
});

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

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

3 个答案: