单个HTML中的多个页面，页面之间具有连续性

Question

I found this code below (which i updated a little), which is sort of what I want, although If I am on the English section I want it to link to the english section on another webspage by passing the page ref in the link. 我在下面找到了这段代码（我对其进行了一些更新），尽管我希望使用英文版，但我希望通过在链接中传递页面引用将其链接到另一个网页上的英文版，但这是我想要的。

I am basically HOPING to have a french and english version of text in one html file, the user being able to select the language, so if you are in the english version it would link to the english version of the next page, the french version would link to the french version in the next page. 我基本上希望在一个html文件中具有法语和英语版本的文本，用户可以选择语言，因此如果您使用英语版本，它将链接到下一页的英语版本，法语版本将在下一页链接到法语版本。 The links would link using a hashtag for example 例如，链接将使用井号链接

combinedhtml.htm/#English html.htm /＃English

or 要么

combinedhtml.htm/#French html.htm /＃French

Hope that makes sense. 希望有道理。

Where ever possible it would be best to have the very minimal of javascript (as I am not good with Javascript), prefer to do as much as possible in HTML5/CSS. 在可能的情况下，最好使用尽可能少的javascript（因为我对Javascript不满意），最好在HTML5 / CSS中做尽可能多的事情。

Thanks 谢谢

<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="English">
    <a href="#" onclick="return show('French','English');">Show French Version</a>
    <br>
    My ENGLISH Content which should link to English content on linked pages
    <a href="Page2#English"> link to another page showing the correct version (English)</a> 
  </div>

  <div id="French" style="display:none">
    <a href="#" onclick="return show('English','French');">Show English Version</a>
    <br>
    My FRENCH Content which should link to English content on linked pages
    <a href="Page2#French"> link to another page showing the correct version (French)</a>
  </div>

</body>
</html>

Answer 1

I think the Page2 would work the same way as Page1 我认为Page2工作方式与Page1相同

but you would add 但是你会添加

<script>
window.onload=show
window.addEventListener("hashchange", show, false);
</script>

to show the English / French Div when the page was loaded initially 在最初加载页面时显示英语/法语Div

Edit 编辑

your show function would look like: 您的显示功能如下所示：

function show() {
  var shown = window.location.hash.split('#')[1];
  document.getElementById('English').style.display='none';
  document.getElementById('French').style.display='none';
  document.getElementById(shown).style.display='block';
  return false;
 }

and here is the modified html 这是修改后的html

<div id="English">
    <a href="Page2#French">Show French Version</a>
    <br>
    My ENGLISH Content which should link to English content on linked pages
    <a href="Page2#English"> link to another page showing the correct version (English)</a> 
  </div>

  <div id="French" style="display:none">
    <a href="Page2#Englsh">Show English Version</a>
    <br>
    My FRENCH Content which should link to English content on linked pages
    <a href="Page2#French"> link to another page showing the correct version (French)</a>
  </div>

Answer 2

Alohci, has kindly been helping me solve my problem with having two languages on one page and he came up with this great trick. 阿罗奇（Alohci）一直在帮助我解决在一页上使用两种语言的问题，他想出了这个绝妙的技巧。 It works really well and I am using it here 它真的很好用，我在这里用

http://www.poipleshadow.com/Websites/Celine/index.htm http://www.poipleshadow.com/Websites/Celine/index.htm

Just use the flags (top right hand corner) to swap languages.. 只需使用标志（右上角）即可交换语言。

CSS 的CSS

@charset "utf-8";
/* Neat Trick by Alohci */
[lang=fr] { display:none; }
[lang=en] { display:block; }
#French:target ~ [lang=fr], #French:target ~ * [lang=fr] { display:block; }
:target ~ [lang=en], :target ~ * [lang=en] { display:none; }

HTML 的HTML

<!-- DO NOT CHANGE THIS --> 
<a id="French"></a>
<h1 lang="en">English Title only shown when you add lang="en"</h1>
<h1 lang="fr">French  Title only shown when you add lang="fr"</h1>
<p lang="en">English text to go with the title, this is not shown on the French  version</p>
<p lang="fr">French  text to go with the title, this is not shown on the English version</p>
<p> This text is shown on both as it doesn't state that it is either French or English </p

Thanks to Alohci for his assistance! 感谢Alohci的协助！

单个HTML中的多个页面，页面之间具有连续性

问题描述

2 个解决方案

解决方案1
0 2014-08-31 10:38:58

解决方案2
0 已采纳 2014-09-12 09:53:18

单个HTML中的多个页面，页面之间具有连续性

问题描述

2 个解决方案

解决方案1 0 2014-08-31 10:38:58

解决方案2 0 已采纳 2014-09-12 09:53:18

解决方案1
0 2014-08-31 10:38:58

解决方案2
0 已采纳 2014-09-12 09:53:18