Наконец, я обнаружил, что код не работает вне серверной среды - по крайней мере, не с моими настройками, например. file:// .....
В Linux я должен установить локальный сервер, например sudo python -m SimpleHTTPServer
для того, чтобы успешно запустить код Jquery веб-страницы.
Затем я должен набрать http://0.0.0.0:8000/index.html в веб-браузере, чтобы правильно запустить сайт.
Обратите внимание, что вам может понадобиться очистить кеш браузера , чтобы увидеть обновленную версию вашего сайта между изменениями.
Часть div в index.html заключалась в том, что --note объявления "id":
<a href="index.html" class="topnav_estatistics">ESTATISTICS </a>
<a id=idStatistics href ="#Statistics" > <span lang="en">Statistics </span> <span lang="gr">Στατιστική </span> </a>
<a id=info_page href ="#info_page" > <span lang="en">info_page </span> <span lang="gr"> info_page </span> </a>
<a id=articles href ="#articles" > <span lang="en">Stat Articles </span> <span lang="gr"> Άρθρα </span> </a>
<a id=Planets_Health href ="#Planets_Health" > <span lang="en">Planet's Health </span> <span lang="gr"> Περιβάλλον </span> </a>
<a id=Services href ="#Services" > <span lang="en">Services </span> <span lang="gr"> Υπηρεσίες </span> </a>
Код для выбора языка был таким же, как на странице index.html, после заголовка:
<!--- The Language options --->
<select id="lang_switch" class="lang_switch">
<option value="en">En </option>
<option value="gr">Gr </option>
</select>
Внешняя html-информация была добавлена в следующие элементы div страницы index.html в разделе body:
<div id="left_link_index" class="left_link_index">
<div id="mainbody" class="main_body">
Страница "statistics.html" в части тела была такой:
<body>
<div id="Statistics_page" class="Statistics_htmlfile_page">
<div id="stat" class="stat_main">
<div id="st_en" lang="en" class="stat_en">
Statistics is a science based on probabilities
</div>
<div id="st_gr" lang="gr" class="stat_gr">
Στατιστιστική
Στατιστική
Στατιστιστική
</div>
</div>
<div id="left_links_en" class="Statistics_links">
<a href ="#Articles" > <li> <span lang="en"> Articles </span> </li> </a>
</div>
<div id="left_links_gr" class="Statistics_links">
<a href ="#Articles" > <li> <span lang="gr"> Αρθρογραφία </span> </li> </a>
</div>
</body>
a) Код сценария для изменения (переключения) языка между различными языковыми опциями, а также b) код сценария для вставки частей внешней html-страницы в число элементов div, основанных на выборе языка, заключался в следующем:
<script>
// stackoverflow: 49637061 & 11134701
//Default settings
$('[lang="en"]').show();
$('[lang="gr"]').hide();
$(document).ready(function(){
$("#info_page").click(function(){
$("#mainbody").load("info_page.html #st_en");
$("#left_link_index").load("info_page.html #left_links_en");
});
$("#stat_page").click(function(){
$("#mainbody").load("stat_page.html #st_en");
$("#left_link_index").load("stat_page.html #left_links_en");
});
$("#articles_page").click(function(){
$("#mainbody").load("articles_page.html #st_en");
});
$("#Planets_Health").click(function(){
$("#mainbody").load("Planets_Health.html #st_en");
});
$("#Services").click(function(){
$("#mainbody").load("Services.html #st_en");
});
});
$('#lang_switch').change(function () {
var lang = $(this).val();
switch (lang) {
case 'gr':
$('[lang]').hide();
$('[lang="gr"]').show();
$(document).ready(function(){
$("#info_page").click(function(){
$("#mainbody").load("info_page.html #st_gr");
$("#left_link_index").load("info_page.html #left_links_gr");
});
$("#stat_page").click(function(){
$("#mainbody").load("stat_page.html #st_gr");
$("#left_link_index").load("stat_page.html #left_links_gr");
});
$("#articles").click(function(){
$("#mainbody").load("articles.html #st_gr");
});
$("#Planets_Health").click(function(){
$("#mainbody").load("Planets_Health.html #st_gr");
});
$("#Services").click(function(){
$("#mainbody").load("Services.html #st_gr");
});
});
break;
case 'en':
$('[lang]').hide();
$('[lang="gr"]').show();
$(document).ready(function(){
$("#info_page").click(function(){
$("#mainbody").load("info_page.html #st_en");
$("#left_link_index").load("info_page.html #left_links_en");
});
$("#stat_page").click(function(){
$("#mainbody").load("Statistics.html #st_en");
$("#left_link_index").load("stat_page.html #left_links_en");
});
$("#articles").click(function(){
$("#mainbody").load("articles.html #st_en");
});
$("#Planets_Health").click(function(){
$("#mainbody").load("Planets_Health.html #st_en");
});
$("#Services").click(function(){
$("#mainbody").load("Services.html #st_en");
});
});
break;
};
});
</script>
Обратите внимание, что параметры форматирования загруженной внешней html-страницы в index.html доступны через: ". Left_link_index {}" и ".mainbody {}" параметров в целом. В частности, вы можете объявить дополнительные, например, коды id div или коды классов для форматирования определенных частей внешних вставленных фрагментов html на главную страницу индекса.