單頁HTML中的多個頁面之間的連續性

我發現下面的代碼（我更新了一點），這是我想要的，但如果我在英文部分，我希望它鏈接到英文部分在另一個網頁上傳遞鏈接中的頁面參考。單頁HTML中的多個頁面之間的連續性

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

來源

2014-08-31 Poiple Shadow

如果你想要最低限度的JavaScript，你可能會感興趣的是，這可以在現代瀏覽器中用[完全沒有JavaScript]來完成（http://www.alohci.net/static/richardiii。html＃英語） – Alohci 2014-08-31 12:27:09

好的，我喜歡那個:) - 它很聰明，雖然我不太明白它爲什麼可以工作，但它確實......非常感謝。 – 2014-09-01 13:43:43

確定Alohci，是否可以使用CSS類而不是ID定義法語/英語部分？我可以將整個頁面放在部分內，但如果我可以突出顯示3或4個可以從英文更改爲法文的部分，那將會很好。我正在考慮主菜單分離，然後分離主分區，但這可能是兩個版本之間相同的代碼塊，如果可能，最好不要重複。例如照片等代碼 – 2014-09-01 13:58:35

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

來源

2014-09-12 09:53:18

我覺得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>

來源

2014-08-31 10:38:58 andrew

ok給那個試試看 – andrew 2014-08-31 10:53:26

謝謝，我目前使用Alohci提供的'trick'，看起來不錯，稍後可能會看看這個，感謝回覆 – 2014-09-03 12:10:32

單頁HTML中的多個頁面之間的連續性

回答

相關問題