[英]How can i replace a section on a page with another section on a anchor click?
I have a tasks listing on right side of a page.我在页面右侧列出了一个任务。 On the other side there is a map shown inside a
div
.在另一边有一张地图显示在
div
。 I want to click on one of the tasks and get there details to replace map's div
.我想单击其中一项任务并获取详细信息以替换地图的
div
。 After clicking in link when i refresh i should still get the task details not the map.在刷新时单击链接后,我仍然应该获得任务详细信息而不是地图。 Here is the code:
这是代码:
$(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>
You can use the addClass method of jquery可以使用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";
});
});
Where the css would be, css 所在的位置,
.show{
display: block;
}
.hidden{
display: none;
}
When clicking the link set anchor part of the url单击链接时设置 url 的锚部分
When rendering the page, check URL for the anchor tag渲染页面时,检查锚标记的 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' }); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.