скрытие и отображение элементов 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 поверх того, что я вижу для profile div. Когда я нажимаю кнопку profile, я снова вижу только результат для элемента profile div, но он переходит чуть выше. Я действительно хочу видеть результаты в одном и том же месте страницы, только содержание должно быть изменено в зависимости от нажатой кнопки.

Любая помощь приветствуется.

DEMO:

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

Answer 1

Так что в других случаях вам нужно сделать оба 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 2

Я предлагаю использовать метод .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>

Answer 3

Я использовал CSS дисплей, и он работает. Примечание: я изменил тип reviewbtn на кнопку, потому что это был тип отправки, и он пытался что-то отправить. Если вам нужно просто запустить JS, она не может быть отправлена ​​кнопкой.

Также изменена кнопка профиля, чтобы вы могли go назад и вперед для демонстрационных целей.

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