Несколько страниц в одном HTML с непрерывностью между страницами

Я нашел этот код ниже (который я немного обновил), что-то вроде того, что я хочу, хотя, если я нахожусь в разделе на английском языке, я хочу, чтобы он ссылался на раздел на английском языке на другой веб-странице, передав ссылку на страницу в ссылке.

В основном я НАДЕЮСЬ иметь французскую и английскую версии текста в одном HTML-файле, при этом пользователь может выбрать язык, поэтому, если вы находитесь в английской версии, он будет ссылаться на английскую версию следующей страницы, французская версия будет ссылка на французскую версию на следующей странице. Ссылки будут ссылаться с использованием хэштега, например

комбинированныйhtml.htm/#английский

or

комбинированныйhtml.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>

javascript html css hyperlink hashtag
person Poiple Shadow    schedule 31.08.2014    source источник
comment
Если вам нужен минимальный JavaScript, вам может быть интересно узнать, что это можно сделать в современных браузерах с помощью никакого JavaScript   -  person Alohci    schedule 31.08.2014
comment
Хорошо, мне это нравится :) - Это умно, хотя я не совсем понимаю, почему это работает, но это работает... Большое спасибо.   -  person Poiple Shadow    schedule 01.09.2014
comment
Хорошо, Алохчи, возможно ли, чтобы разделы на французском и английском языках определялись классом CSS, а не идентификаторами? Я мог бы иметь целую страницу внутри разделов, но было бы неплохо, если бы я мог выделить 3 или 4 раздела, которые можно изменить с английского на французский. Я думал о главном меню отдельно, а затем об отдельном основном разделе, но это может быть «кусок» кода, который был идентичен в обеих версиях, и было бы лучше не дублировать, если это возможно. например код для фотографий и т.д.   -  person Poiple Shadow    schedule 01.09.2014
comment
Не так, нет. Это была демонстрация трюка, поэтому это комментарий, а не ответ. Для чего-то более гибкого придерживайтесь решений JS.   -  person Alohci    schedule 01.09.2014
comment
как это трюк ... это не одобряется? Это хороший трюк, знаете ли вы, совместим ли он с IE, Moz и т. д.?   -  person Poiple Shadow    schedule 01.09.2014
comment
Может ли это работать, не добавляя #id для отображения английского языка, а затем показывая французский язык, имея #French? например, французский будет richardiii.html#французский английский будет richardiii.htm   -  person Poiple Shadow    schedule 05.09.2014
comment
Да, при условии, что английский раздел будет последним в HTML. Затем замените section { display:none; } section:target { display:block; } на #French { display:none; } #French:target { display:block; } #English { display:block; } :target ~ #English { display:none; } и все #английские идентификаторы фрагментов можно убрать из ссылок.   -  person Alohci    schedule 05.09.2014
comment
Я подумал о вашем вопросе о нескольких блоках по классам. Вместо использования атрибута класса вы можете (и должны) использовать атрибут lang. Если вы добавите якорь отдельно от содержимого в начале тела, а затем примените css к элементам lang относительно этого, вы можете получить несколько желаемых блоков. Эта исправленная ссылка показывает только один блок для каждого языка, но будет работать для нескольких блоки.   -  person Alohci    schedule 05.09.2014
comment
Спасибо за это, в начале тела есть «кусок» Javascript в файле. Это нужно/что это? Я его снял, и он все еще работает?? - Большое спасибо за всю вашу работу.   -  person Poiple Shadow    schedule 08.09.2014
comment
В моем исходнике нет JS. Вы видите что-то, добавленное плагином для браузера?   -  person Alohci    schedule 08.09.2014
comment
Возможно... Я все равно удалил его... Я потратил на него все утро, и все прошло хорошо, спасибо... ссылка — это страница, которую я создал, вы используете флаги в правом верхнем углу, чтобы изменить английский язык на французский... Только одна страница в качестве примера, чтобы показать моему другу.. Спасибо за всю вашу помощь, пожалуйста, кричите, если я сделал что-то глупое в примере.   -  person Poiple Shadow    schedule 09.09.2014
comment
синий и красный только для того, чтобы помочь мне узнать, какие биты были французскими / английскими легко ...   -  person Poiple Shadow    schedule 09.09.2014
comment
ОК, у меня есть еще один вопрос для вас... Можно ли связать идентификатор, а также использовать идентификатор языка? Посмотрите здесь Образец страницы, если я использую ссылку на идентификатор, она перезаписывает языковой тег (поэтому он всегда ссылается на английскую версию. Ссылка, которую я пытаюсь заставить работать, находится справа и называется ССЫЛКА ВНУТРИ ДОКУМЕНТА.   -  person Poiple Shadow    schedule 11.09.2014
comment
Если вы используете идентификатор фрагмента для языка, вы не можете использовать его ни для чего другого.   -  person Alohci    schedule 11.09.2014

Ответы (2)


arrow_upward
0
arrow_downward

Я думаю, что 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>
person andrew    schedule 31.08.2014
comment
Спасибо, в настоящее время я использую «трюк», предоставленный Alohci, который кажется хорошим, возможно, я посмотрю на это позже, спасибо за ответ. - person Poiple Shadow; 03.09.2014

arrow_upward
0
arrow_downward

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 за помощь!

person Poiple Shadow    schedule 12.09.2014