在同一 div 中的 div 内打开链接答案

【问题标题】：Opening a link inside a div in the same div在同一 div 中的 div 内打开链接
【发布时间】：2012-05-04 09:51:48
【问题描述】：

我正在尝试创建一个 div，其中包含 PHP 网页，但是当我单击 div 中的任何链接时，它会在新窗口中加载。

有人知道如何解决这个问题吗？

我也尝试使用iframe 而不是div，但这会导致其他问题。

HTML 代码：

<div id="cover5">
    <div id="warning">
        <?php include 'SignIn.php'; ?>
        <p align="center">
            <a href="#" onclick="javascript:cover5();">Home</a>
        </p>
    </div>
</div>

JS代码：

function cover5() {
    var cover = document.getElementById('cover5');
    if (vis) {
        vis = 0;
        cover.style.display='block';
    }
    else {
        vis = 1;
        cover.style.display='none';
    }
}

【问题讨论】：

您希望当用户点击您包含的代码中的链接时，新页面会在div#warning 中加载，而不是在用户的浏览器中加载？
查找 AJAX，这正是您所需要的。

标签： php javascript html navigation

【解决方案1】：

您必须区分 Web 应用程序的客户端和服务器端。

<?php include 'SignIn.php'; ?> 是一个服务器端命令，因为<?php ?>，这意味着用户永远不会看到该行的确切内容。

如果您的SignIn.php 文件包含例如<a href="go-there.php">my link</a>，则用户将仅获得该包含的输出，即

<div id="warning">
    <a href="go-there.php">my link</a
</div>

当用户点击该链接时，他的浏览器将加载它，就好像这个<a /> 会直接硬写在您的 HTML 代码中，然后在新窗口中打开它。

我不知道如何使用原生 JS，但是使用 jQuery，你可以尝试这样的事情：

$(function() {
    $("#warning a").each(function() {
        $("#warning").load($(this).attr("href"));
    });
});

【讨论】：

【解决方案2】：

要从页面元素中的特定链接呈现 html，您需要运行 ajax GET 调用并加载 html。然后将回复插入您的div。

使用 jQuery：

$("a").click(function(){                    //calls function when anchor is clicked
  var link = $(this).prop("src");           //finds the link from the anchor
  $.get(link,function(data, status, xhr){   //makes an ajax call to the page
    $("#myDiv").html(data);                 //replaces the html of #myDiv with the returned page
  });
});

希望有帮助

【讨论】：

【解决方案3】：

HTML 代码：

<div id="cover5">
    <div id="links">
        <p align="center">
            <a href="#" onclick="javascript:cover5();">Home</a>
        </p>
    </div>
    <div id="warning">
        <?php include 'SignIn.php'; ?>
    </div>
</div>

和JS代码：

function cover5() {
    var cover = document.getElementById('warning');
    if (vis) {
        vis = 0;
        cover.style.display='block';
    }
    else {
        vis = 1;
        cover.style.display='none';
    }
}

当用户点击“links”div中的链接时，它会调用JS函数“cover5()”

可以使用jQuery或者ajax来弹出“警告”div

在您的代码中，您将链接添加到 worning div，以便在第二次时，ti 会隐藏那里的所有链接。

【讨论】：