一个HTML文件中有多个不同的页面 [英] Multiple distinct pages in one HTML file

查看:101
本文介绍了一个HTML文件中有多个不同的页面的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有没有办法在单个HTML文件中包含多个不同的HTML页面?例如,假设我有一个包含两页的网站:

 第1页:点击此处查看第2页

code>

  Page 2 :点击此处查看页面1 

我可以创建一个嵌入简单静态HTML的HTML文件但每次只显示一个?我的实际页面当然更复杂的图像,表格和JavaScript来扩展表格行。我宁愿避免太多的脚本代码。谢谢!

解决方案

好的,您可以,但您可能只想拥有两组内容在同一页面中,并在它们之间切换。示例:

 < html> 
< head>
< script>
function show(显示,隐藏){
document.getElementById(显示).style.display ='block';
document.getElementById(hidden).style.display ='none';
返回false;
}
< / script>
< / head>
< body>

< div id =Page1>
页面1的内容
< a href =#onclick =return show('Page2','Page1');>显示页面2< / a>
< / div>

< div id =Page2style =display:none>
页面2的内容
< a href =#onclick =return show('Page1','Page2');>显示页面1< / a>
< / div>

< / body>
< / html>

(简化的HTML代码,当然应该有文档类型等)。 b

Is there any way to have multiple distinct HTML pages contained within a single HTML file? For example, suppose I have a website with two pages:

Page 1 : click here for page 2

and

Page 2 : click here for page 1

Can I create a single HTML file that embeds simple static HTML for both pages but only displays one at a time? My actual pages are of course more complicated with images, tables and javascript to expand table rows. I would prefer to avoid too much script code. Thanks!

解决方案

Well, you could, but you probably just want to have two sets of content in the same page, and switch between them. Example:

<html>
<head>
<script>
function show(shown, hidden) {
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  return false;
}
</script>
</head>
<body>

  <div id="Page1">
    Content of page 1
    <a href="#" onclick="return show('Page2','Page1');">Show page 2</a>
  </div>

  <div id="Page2" style="display:none">
    Content of page 2
    <a href="#" onclick="return show('Page1','Page2');">Show page 1</a>
  </div>

</body>
</html>

(Simplififed HTML code, should of course have doctype, etc.)

这篇关于一个HTML文件中有多个不同的页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆