Javascript在一个HTML页面内的页面之间轮换

时间:2011-09-01 19:48:11

标签: javascript html

我想帮助使用JavaScript在一个HTML页面中显示内容(到不同的页面)。 这是我到目前为止所发现的一个示例:http://www.swan10.nl/stuff/test.htm但是,每次点击链接时,我都不会在框中显示“常见问题解答#blabla”,而是希望显示正常内容之类的文字和图片。有没有办法做到这一点?

我尝试删除CreateDiv函数并将其替换为HTML代码,但它不起作用。

提前谢谢你:)

3 个答案:

答案 0 :(得分:1)

嗯,你需要使用AJAX将数据拉入页面并以你选择的任何方式显示它。如果你想使用框架查看JQuery。它有很棒的AJAX功能。否则请阅读HERE

重新阅读您的帖子后,我想您可能只想选择一次在表单上显示哪个div。这可以通过将所有div放在同一个容器中来实现。然后切换他们的显示css属性。

答案 1 :(得分:1)

我个人会在你的一个元素上使用innerHTML属性。它允许您为该元素添加标记。请在此处查看:http://www.w3schools.com/jsref/prop_html_innerhtml.asp

<html> 
<head> 
<title>Multiple DIV</title> 
<style type="text/css"> 
DIV#db {  
  border : 1px solid blue; 
  width : 400px; 
  height : 400px; 
} 
</style> 
<script type="text/javascript"> 
  var Content = new Array();
  Content[0] = '<i>test1</i>';
  Content[1] = '<b>test2</b><br><img src =http://www.w3schools.com/images/w3schoolslogo.gif>';
  Content[2] = '<u>test3</u>';
  Content[3] = '<s>test4</s>';

function Toggle(IDS) {  
  document.getElementById('db').innerHTML = Content[IDS];
} 
</script> 
</head> 
<body onLoad="Toggle(0,10)"> 
<a href='#' onClick="Toggle(0)">FAQ #1</a> 
<a href='#' onClick="Toggle(1)">FAQ #2</a> 
<a href='#' onClick="Toggle(2)">FAQ #3</a> 
<a href='#' onClick="Toggle(3)">FAQ #4</a> 
<p /> 
<div id="db"></div>
</body> 
</html> 

我更新了它以使用innerHTML

工作所有javascripty

答案 2 :(得分:1)

使用jQuery就像

一样简单
$('#divname').load('/path/to/file.html');

请注意,结果可能不应包含<html><head>标记(尽管您似乎并不关心格式良好的HTML代码)。

我可能还应该提到,您不应该让客户端为您加载内容,这就是服务器端代码的用途。