点击超链接后在同一页面显示对象

我正在研究一个纯HTML5和小Javascript的网页。点击超链接后在同一页面显示对象

我想在页面文本附近创建菜单，当我点击其中一个菜单链接时，它将包括并显示其他html页面的内容。这样的：

http://i.stack.imgur.com/ravwC.png

我读到帧和I帧和我决定，我不想使用它们，而是改用对象。

这里我有什么我介意：

<center> 
<right> 
<li>link 1</li> 
<li>link 2</li> 
<li>link 3</li> 
</right> 
<left> 
<object data="text.html" type="text/html"></object> 
</left> 
</center>

如何显示和更改在同一个页面的其他HTML文件的内容，而在菜单链接点击？

来源

2015-01-16 StackBuck

为什么不使用DIV？ '$（“＃divId”）。load（url）' – mplungjan

你能举出完整的例子吗？ – StackBuck

这里是我会考虑做

<right> 
    <ul id="nav"> 
    <li><a href="page1.html">link 1</a></li> 
    <li><a href="page2.html">link 2</a></li> 
    <li><a href="page3.html">link 3</a></li> 
    </ul> 
</right> 
<left> 
    <div id="content"></div> 
</left> 

$(function() { 
    $("#nav > li > a").on("click",function(e) { 
    e.preventDefault(); // stop the link 
    $("#content").load(this.href); // href must come from same origin as the script 
    }); 
});

UPDATE
因为有些浏览器不允许本地页面被ajaxed（这是.load做什么），为什么不使用你的硬盘的基于网页的iFrame - 它会在所有的浏览器没有任何脚本：

<right> 
    <ul id="nav"> 
    <li><a href="page1.html" target="if1">link 1</a></li> 
    <li><a href="page2.html" target="if1">link 2</a></li> 
    <li><a href="page3.html" target="if1">link 3</a></li> 
    </ul> 
</right> 
<left> 
    <iFrame name="if1"></iframe"> 
</left>

来源

2015-01-16 12:19:57 mplungjan

如何在index.html文件中进行排列？我尝试过，但它不起作用。另外，请记住，我工作的独立脚本将不会连接到互联网。 – StackBuck

你没有说任何关于它不在网络服务器上。然后将div更改为iFrame。我不认为任何理由。将target =“iframeName”添加到链接并设置 – mplungjan

-1

您可以对每个链接进行onclick操作。

根据您的示例： $（“object”）。attr（“data”，“text2.html”）;

喜欢的东西：

<center> 
    <right> 
    <li onclick="$('object').attr('data','text1.html')">link 1</li> 
    <li onclick="$('object').attr('data','text2.html')">link 2</li> 
    <li onclick="$('object').attr('data','text3.html')">link 3</li> 
    </right> 
    <left> 
    <object data="text1.html" type="text/html"></object> 
    </left> 
    </center>

我headnt icluded头标记。你必须使用jQuery。

作品JST罚款： http://jsfiddle.net/rws8pa8z/

来源

2015-01-16 10:48:47 Nomeaning25

它不工作。它甚至不起超链接的作用。 – StackBuck

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 
<html> 
 
<head> 
 
<title>Test</title> 
 
<script language="JavaScript"> 
 
function doPage() 
 
{ 
 
    var objTag = document.getElementById("contentarea"); 
 
    if (objTag != null) 
 
    { 
 
    \t objTag.setAttribute('data', 'http://stackoverflow.com/'); 
 
    \t alert('Page should have been changed'); 
 
    } 
 
} 
 
</script> 
 
</head> 
 
<body> 
 
<form name="Form1" method="POST"> 
 
<p><input type="button" value="Click to change page" onclick="doPage();" /></p> 
 
<object style="visibility: visible; border: none;" standby="loading data" id="contentarea" title="loading" width="100%" height="53%" type="text/html" data="http://stackoverflow.com/"></object> 
 
</form> 
 
</body> 
 
</html>

来源

2015-01-16 10:58:08 equerambug

我不想使用表单来做到这一点。我确定有更好的方法来做到这一点。 – StackBuck

点击超链接后在同一页面显示对象

回答

相关问题