Multiple Pages in Single HTML with continuity between pages

问题

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. The links would link using a hashtag for example

combinedhtml.htm/#English

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

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>

回答1:

I think the Page2 would work the same way as 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

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

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

回答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. It works really well and I am using it here

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

Just use the flags (top right hand corner) to swap languages..

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

Thanks to Alohci for his assistance!

来源：https://stackoverflow.com/questions/25591099/multiple-pages-in-single-html-with-continuity-between-pages

标签

javascript

html5

css3

hyperlink

hashtag