从 div 打开超链接，并将其加载到同一个 div [关闭]答案

【问题标题】：Opening hyperlink from div, and load it to the same div [closed]从 div 打开超链接，并将其加载到同一个 div [关闭]
【发布时间】：2018-01-29 19:36:14
【问题描述】：

目前有

$(document).ready(function() {

    // Check for hash value in URL
    var hash = window.location.hash.substr(1);
    var href = $('#menu a, #name a, #contact_us a, #item a, #text a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-4)){
            var toLoad = hash+'.php #pagearea';
            $('#pagearea').load(toLoad)
        } 
    });


    $('#menu a, #name a, #contact_us a, #item a, #text a').click(function(e){
                if($(e.target).is('foo')){
                e.preventDefault();
                window.location.href = "/current/forum";
                return;
                }

    var toLoad = $(this).attr('href');
    $('#pagearea').hide('fast',loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
    function loadContent() {
        $('#pagearea').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        $('#pagearea').show('normal',hideLoader());
    }
    function hideLoader() {
        $('#load').fadeOut('normal');
    }
    return false;

    });
});

效果很好。除非遵循来自 #pagearea 内部的链接。它只是转到 php 页面。我找到了以下主题

答案：更新 JQuery。使用的是过时的版本。问题已自行解决。

【问题讨论】：

显示你的html代码
请查看以下链接，这可能会对您有所帮助：hashbangcode.com/blog/…
我很犹豫是否要包含我的 html，因为它很长，而且这个主题因“包含不必要的”信息而受到很多抨击，但我现在会按照要求进行。我正在尝试访问您发送给我的链接，但我在 atm 时遇到了一些困难。
在进一步查看链接后，我无法找到如何在当前情况下使用它，我在帖子中引用的链接中的 afaik .live(click) 也不应该再使用?
如果我的理解是正确的，那么当您单击任何菜单项主页时，图片将在 div 中加载相关数据，目前默认内容写为“保留用于内容和页面区域加载"

标签： php jquery html css ajax

【解决方案1】：

以下代码适用于 php 和 html 文件

index.html:

<div id="menu">
    <a href="default.php" class="menu" data-url="index">Home</a>|
    <a href="about.php" class="menu" data-url="about">About</a>|
    <a href="picture.php" class="menu" data-url="picture">Pictures</a>|
    <a href="videos.php" class="menu" data-url="videos">Videos</a>
</div>

script.js:

 $("document").ready(function() {    
    loadPage("default.html");
    $(".menu").on("click", function(e) {
        e.preventDefault();
        var fullPath = $(this).attr("href");
        loadPage(fullPath);
    });
    function loadPage(fullPath){
        $("#pagearea").load(fullPath, function(response, status, xhr) {
        if (status == "error") {
            var msg = "Sorry but there was an error: ";
            $("#error").html(msg + xhr.status + " " + xhr.statusText);
        }
        });
    }
});

【讨论】：

这应该替换我的整个代码吗？我不能让它工作......：\
不，它只会替换你的 div 而不是整个 div
你有没有参考 plunkr url
好的，我看了一下 plunkers。为了说明我的意思（对不起，我不知道如何更新您的 plunker），但请转到 Pictures.html，然后创建此指向 videos.html 的链接点击我查看测试！现在从索引导航到图片，然后单击 Videos.html 链接。你会看到它并没有取代 div 内容，而是转到网页 www.site.com/videos.html 这现在有意义吗我的朋友？
好的，这与父页面无关，但您想从子页面导航到父页面，而不是从父页面导航到父页面

【解决方案2】：

叹息叹息

原始代码运行良好。更新jQuery。因为大声哭泣。我会笑。但那是一天半的时间，我再也回不来了。

【讨论】：