點擊超鏈接後在同一頁面顯示對象

我正在研究一個純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

點擊超鏈接後在同一頁面顯示對象

回答

相關問題