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

Multiple Pages in Single HTML with continuity between pages

本文关键字：之间 连续性 HTML 单个      更新时间：2023-09-26

我在下面找到了这个代码（我更新了一点），这是我想要的，尽管如果我在英语部分，我希望它通过在链接中传递页面引用来链接到另一个网页上的英语部分。

我基本上希望在一个html文件中有一个法语和英语版本的文本，用户可以选择语言，所以如果你在英语版本中，它会链接到下一页的英语版本，法语版本会链接到上一页的法语版本。链接将使用标签进行链接，例如

combinedhtml.htm/#英文

或

combinedhtml.htm/#法语

希望这是有道理的。

在任何可能的情况下，最好使用最少量的javascript（因为我不擅长javascript），更喜欢在HTML5/CSS中尽可能多地使用。

感谢

<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>

我认为Page2的工作方式与Page1 相同

但是你会添加

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

显示页面最初加载时的英语/法语Div

编辑

你的表演功能看起来像：

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;
 }

这是修改后的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>

Alohci一直在好心地帮助我解决在一个页面上使用两种语言的问题，他想出了这个好办法。它工作得很好，我在这里使用

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

只需使用标志（右上角）即可交换语言。。

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

<!-- 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

感谢Alohci的协助！

相关文章：