如何用锚点击上的另一个部分替换页面上的一个部分？答案

【问题标题】：How can i replace a section on a page with another section on a anchor click?如何用锚点击上的另一个部分替换页面上的一个部分？
【发布时间】：2020-05-04 02:06:39
【问题描述】：

我在页面右侧有一个任务列表。在另一边，div 内显示了一张地图。我想单击其中一项任务并获取详细信息以替换地图的div。在我刷新时单击链接后，我仍然应该得到任务详细信息而不是地图。代码如下：

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

【问题讨论】：

标签： javascript jquery html laravel

【解决方案1】：

可以使用jquery的addClass方法

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

【讨论】：

@NomanCH 更新了 sn-p 并添加了多哈希支持。请再次检查。
编辑后的代码有效，但有一个小问题。它在重新加载页面时显示map div。加载完成后会显示所需的详细信息
您可以首先使用额外的类和地图容器（在 html 中）隐藏它，然后通过检查是否存在哈希来重新加载，您可以显示或隐藏它。

【解决方案2】：

点击链接时设置锚部分的url

渲染页面时，检查锚标记的 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'
        });  
    });

【讨论】：