Как я могу заменить раздел на странице другим разделом на клике привязки?

Question

У меня есть список задач в правой части страницы. На другой стороне есть карта, показанная внутри div. Я хочу щелкнуть одну из задач и получить подробную информацию, чтобы заменить карту div. После нажатия на ссылку, когда я refre sh я все еще должен получить детали задачи, а не карту. Вот код:

$(document).ready(function() {
  $("#show_task_detail").click(function() {
    $("#details").show();
    $("#browse_tasks_map").hide();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:;" class="list-group-item list-group-item-action task-detail-link " data-url="/task-details" data-id="{{ $post->id }}" id="show_task_detail"><input type="hidden" name="key" value="{{$post->id}}" />Post title</a>
<div id="browse_tasks_map" style="position: relative; overflow: hidden;"></div>
<div class="col-md-12 col-lg-12 col-xs-12 col-sm-12 task-detail-data" style="display: none;" id="details"></div>

Answer 1

Вы можете использовать метод addClass jquery

    $(document).ready(function () {

    var hash = window.location.hash.split("#");
    if (hash.indexOf('show-details') > -1 ) {
        $("#details").addClass('show');
        $("#browse_tasks_map").addClass('hidden');
    }

    $("#show_task_detail").click(function () {
        $("#details").addClass('show');
        $("#browse_tasks_map").addClass('hidden');
        window.location.hash = "show-details";

    });
});

Где будет css,

.show{
display: block;
}

.hidden{
display: none;
}

Answer 2

1. При нажатии на ссылку задайте часть ссылки URL-адреса

2. При отображении страницы проверьте URL-адрес тега привязки

      function showDetails()
      {
        $("#details").show();
        $("#browse_tasks_map").hide();
      }
   
      $(document).ready(function() {
   
           if (document.hash == 'details') 
           {
              showDetails();
           }
           $("#show_task_detail").click(function () {
               showDetails();
               document.location.hash = 'details'
           });  
       });