laravel 如何在锚单击时将页面上的一个部分替换为另一个部分？

rekjcdws 于 2023-06-24 发布在其他

关注(0)|答案(2)|浏览(108)

我有一个任务列在一个页面的右侧。另一方面，div中显示了一个Map。我想点击其中一个任务，并获得替换map的div的详细信息。点击链接后，当我刷新时，我仍然会得到任务详细信息，而不是Map。下面是代码：

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

laravel

来源：https://stackoverflow.com/questions/59783057/how-can-i-replace-a-section-on-a-page-with-another-section-on-an-anchor-click

2条答案

按热度按时间

de90aj5v1#

可以使用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;
}

赞(0）回复(0）举报 2023-06-24

t5zmwmid2#

1.单击链接时，设置URL的锚部分
1.呈现页面时，检查锚标记的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'
    });
});

赞(0）回复(0）举报 2023-06-24

我来回答

laravel 如何在锚单击时将页面上的一个部分替换为另一个部分？

2条答案

相关问题

热门标签

最新问答