Javascript 如何用锚定单击上的另一节替换页面上的节？

我在页面右侧有一个任务列表。另一边是

div

中显示的地图。我想单击其中一个任务并获取详细信息以替换map的

div

。在刷新时单击链接后，我仍应获得任务详细信息，而不是地图。代码如下：

$（文档）.ready（函数（）{
$（“显示任务详细信息”）。单击（函数（）{
$（“#详细信息”）.show（）；
$（“#浏览_任务_地图”）.hide（）；
});
});
您可以使用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;
}

单击链接时，设置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'
        });  
    }); 


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