Question

我遇到了一个问题，我将如何定位，这是场景，每当我点击主页，食物或度假村等链接时，它的内容应该在下面的显示屏上输出。总是会发生的是，当我点击这些链接时，它总会转到一个新选项卡。我想要的是它应该显示在同一页面和给定的div上。请帮助我，我一直在尝试搜索互联网，但不同的结果即将出现。

以下是我的链接

<div id = "panel">
    <p>
        <a href = "home.html" target = "display">
            <font color ="white">Home</font
        </a>
        <a href = "resort.html" target = "display">
            <font color ="white">Resort</font>
        </a> 
        <a href = "hotel.html" target = "display">
            <font color = "white">Hotel</font>
        </a> 
        <a href = "food.html" target = "display">
            <font color ="white">Food</font
        </a> 
        <a href = "rates.html" target = "display">
            <font color="white">Rates</font>
        </a> 
        <a href="reservation.html"target="display
            <font color="white">Reservation</font>
        </a> 
        <a href = "contact.html" target = "display">
            <font color = "white">ContactUs</font>
        </a>
    </p>
</div>

这是内容应放在

中的地方

<div id="display">
    <iframe name="display"></iframe>
</div>

Answer 1

如果我理解这个问题 - 而且我真的不知道 - 我认为你的问题很容易解决。只需改变一下：

<name = "display">

要：

<iframe name="display">

我假设您要在iframe中加载这些链接，是吗？否则你想要做的将需要javascript。但同样，我不确定我理解。

HTML中没有<name>标记，但名称为attribute

编辑以解释iframe：

iframe在网页A中加载一个网页B，但这两个仍然是单独的页面。＆＃34;框＆＃34;可能是iframe本身的边界。当网页B的内容太大而iframe不能一次显示所有内容时，会出现滚动条。要摆脱滚动条，您可以使iframe更大或使网页B的内容更小。

使iframe变大与使任何其他元素变大没有什么不同：只需change it's CSS。

Answer 2

我试过这个。使用此代码＆lt; JsFiddle Link＆gt; ：

首先加载jQuery：位于代码顶部

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

然后在文件底部添加此jQuery代码。在此代码中，您只需检查何时单击锚标记，然后返回false，这将阻止锚标记单击提交。以及加载功能将加载所需的文件＆＃34; href＆＃34;属性。

<script>
$("a").on("click", function(){
//alert($(this).attr("href"));  
$( "#display" ).load( $(this).attr("href") );
return false;
});
</script>

注意：如果您在本地服务器上运行它，则没有问题。您还可以在其中加载.php文件。但是如果您在Windows资源管理器或Linux文件系统中运行它，那么在firebox中打开它。

Answer 3

是的，Crowhill是对的。我想你想拥有一个单页网站。然后你必须在一个html页面中写下所有内容，不同的div用于你想要使用链接显示的不同内容，并使用你标签的href部分中的div的id（即）。

我认为这会清除您的查询。

https://www.freshdesignweb.com/free-one-page-wordpress-themes/

如何动态地将超链接文件加载到目标/某个div？

3 个答案: