Question

我在下面找到了这个代码（我更新了一点），这是我想要的，虽然如果我在英语部分，我希望它通过传递页面参考链接到另一个webspage上的英语部分链接。

我基本上希望在一个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>

Answer 1

我认为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>

Answer 2

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的帮助！

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

2 个答案: