Я в тупике .show .hide (Как сделать многоязычный сайт)
<head>
<style>
.show {
display: block;
visibility: visible;
}
.hide {
display: none;
visibility: hidden;
}
</style>
<script>
function switchLang(lng)
{
var lngHide = (lng == 'ru') ? 'en' : 'ru';
document.getElementById(lng).className = 'show';
document.getElementById(lngHide).className = 'hide';
}
</script>
</head>
<body>
<p>
<a href="javascript:switchLang('en')"> En </a>
<a href="javascript:switchLang('ru')"> Ru </a>
</p>
<= Этот класс работает
<div id="en" class="hide">English text</div>
<div id="ru" class="show">Russian text</div>
<= следующий не работает
<div id="en" class="hide">новый English text</div>
<div id="ru" class="show">новый Russian text</div>
<body>
Вот какая проблема, одна ссылка работает, то есть переключается, а если помещаю две или три таких, то работает только верхний класс, а нижние не переключают язык. |
Вот чисто логически, что должен вернуть document.getElementById('ru'), если элементов с id='ru' на странице несколько?
|
false? Подскажите как сделать?
|
расшифровываю getElementById:
get - получить Element - элемент (не элементЫ, а элеменТ!!!) ById - по его айди. Соответственно, вы получите элемент (один). А раз у вас несколько элементов с одинаковым айди, какой из них вы получите? Скорее всего первый, так как одинаковые id запрещены! Что делать: во-первых, не мучать пользователя и НЕ ГРУЗИТЬ ДВЕ ВЕРСИИ (3, 4 .. n версий) одного и того же контента!!! во-вторых, сделать разные странички для разных языков и просто переключаться между ними... Ну а выбор языка можно запоминать в куку, чтобы при следующем заходе грузить страницу с необходимым языком... |
понятно, просто страничка одна контента мало. Ладно сделаем по старинке. Всё равно спасибо.
|
Сегодня страничка одна, завтра добавиться вторая, потом контента прибавится... И так дале... получится свалка... Не надо наплевательски относиться к проектированию странички даже если она маленькая.
|
В библиотеках (я юзаю напр. prototype) есть функции типа "getElementsByClassName", можно присвоить всем нужным элементам один класс, отобрать их, а в функции switchLang(lng) менять не className, а только небходимые стилевые опции display, visible. Без библиотеки - можно несложным скриптом отобрать все нужные id по какому-нибудь признаку или списку.
В prototype ваще можно отбирать элементы по любому допустимому css-селектору - для этого имеется функция $$(). |
kvl,
Это все делается намного проще. Данную задачу на js, конечно, выполнять не следует, но подход объяснить на ней можно. Всем элементам, в которых содержится контент на определенном языке дать два класса: lang и имя языка (ru, en, ...). <div class="lang ru">Привет, мир!</div> <div class="lang en">Hello, World!</div> Пишем стили: Код:
.lang { |
А менять класс у body ты тоже без js изловчишься? ;)
|
А я где-то сказал, что без js?
|
| Часовой пояс GMT +3, время: 15:40. |