Смена блоков

TRIGUN · June 25, 2010

Здравствуйте.

Ситуация такова:

Необходимо сделать замену содержимого на страничке по клику.

Есть главная страничка сайта на русском языке (до регистрации), которая содержит краткую информацию. Её необходимо продублировать на английском.

Для этого нужно поставить 2 флажка на русский вариант странички, при нажатии на которые будет меняться содержимое.

То есть пришли на сайт первый раз, видим информацию + 2 флажка, кликаем по английскому флагу и получаем тот же текст на английском, кликаем по русскому флагу и получаем заново русский текст (который стоит всегда по умолчанию). Идет смена блоков.

——————-

С кодом в принципе знаком и уверен что тут необходимо применить DIV, оставив русский блок по умолчанию, а второй блок скрыть.

С тем как флажки впихнуть вместо простых ссылок разберусь сам конечно

Весь смысл:

1) Каким образом обозначить блоки чтобы в итоге они работали как необходимо?

2) Как должен выглядеть кусочек кода с DIV для этих блоков?

stars · June 26, 2010

Вариантов несколько:

1) Cделать 2 блока id="rus" id="eng" и простейший js подвесить на твои флашки чтобы по клику на них у блоков менялись css display: none:block

2) Сделать просто 2 странички а флашки сделать ссылками(если подключить php то можно сделать 1 страницу и ловить какуюнить переменную)...

3) Воспользоваться аяксом...

TRIGUN · June 26, 2010

Вариантов несколько:
1) Cделать 2 блока id="rus" id="eng" и простейший js подвесить на твои флашки чтобы по клику на них у блоков менялись css display: none:block
2) Сделать просто 2 странички а флашки сделать ссылками(если подключить php то можно сделать 1 страницу и ловить какуюнить переменную)...
3) Воспользоваться аяксом...

У меня к сожалению в инструментах лишь 1 вариант. Можно чуть поподробнее пожалуйста?

d0ublezer0 · June 26, 2010

Сделайте два класса:

.hide {display:hiddden;}
.show {display:block;}

Определите своим слоям DIV какие-нибудь идентификаторы

Вставьте в страницу скрипт, меняющие классы, например, используя такую конструкцию::

document.getElementById("idElement").setAttribute("class", "className");

На ваши кнопки/ссылки/флажки повесьте обработчик onclick, который будет менять классы для ваших блоков.

Куда уж подробнее. Осталось только за вас всё сделать.

TRIGUN · June 26, 2010

Сделайте два класса:
.hide {display:hiddden;}
.show {display:block;}
Определите своим слоям DIV какие-нибудь идентификаторы
Вставьте в страницу скрипт, меняющие классы, например, используя такую конструкцию::
document.getElementById("idElement").setAttribute("class", "className");
На ваши кнопки/ссылки/флажки повесьте обработчик onclick, который будет менять классы для ваших блоков.
Куда уж подробнее. Осталось только за вас всё сделать.

Я не очень силен в таком. Но разве через html это делается? Я могу лишь через него.

d0ublezer0 · June 26, 2010

нет, это JS

d0ublezer0 · June 27, 2010

Вот, накидал вам, доработайте сами, как вам нужно.

<html>
<head>
<script language="Javascript">
<!--
 function changeLang(langTo) {
 if (langTo=="en") {
	 document.getElementById("divEn").className="showMe";
 	 document.getElementById("divRu").className="hideMe";
	 }
 if (langTo=="ru") {
	 document.getElementById("divRu").className="showMe";
 	 document.getElementById("divEn").className="hideMe";
	 }
 }
//-->
</script>
<style type="text/css">
.hideMe {
	display:none;
}
.showMe {
	display:block;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ткните в спасибо</title>
</head>

<body>
<a href="#" onClick="changeLang('en')">На английском</a>
<a href="#" onClick="changeLang('ru')">На русском</a>
<div id="divRu" class="showMe">Здесь русский текст</div>
<div id="divEn" class="hideMe">There is English text</div>
</body>
</html>

TRIGUN · June 27, 2010

Вот, накидал вам, доработайте сами, как вам нужно.

<html>
<head>
<script language="Javascript">
<!--
 function changeLang(langTo) {
 if (langTo=="en") {
	 document.getElementById("divEn").className="showMe";
 	 document.getElementById("divRu").className="hideMe";
	 }
 if (langTo=="ru") {
	 document.getElementById("divRu").className="showMe";
 	 document.getElementById("divEn").className="hideMe";
	 }
 }
//-->
</script>
<style type="text/css">
.hideMe {
	display:none;
}
.showMe {
	display:block;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ткните в спасибо</title>
</head>

<body>
<a href="#" onClick="changeLang('en')">На английском</a>
<a href="#" onClick="changeLang('ru')">На русском</a>
<div id="divRu" class="showMe">Здесь русский текст</div>
<div id="divEn" class="hideMe">There is English text</div>
</body>
</html>

Да в принципе, то что нужно. Проверял - работает. Спасибо огромное. Нужно теперь под флажки пихнуть ссылки.

П.С. эффект появления блоков возможно поставить? Что то вроде параметра speed. И куда спасибо тыкнуть?

d0ublezer0 · June 28, 2010

Чтобы эффекты были, нужно использовать различные фреймворки, типа JQuery, но это уже не ко мне, я так глубоко JS не знаю.

Про спасибо - шутка была.

TRIGUN · June 28, 2010

Чтобы эффекты были, нужно использовать различные фреймворки, типа JQuery, но это уже не ко мне, я так глубоко JS не знаю.
Про спасибо - шутка была.

Понятно. Да именно JQuery.

Спасибо за помощь огромное.

Sign In

Смена блоков

Question

TRIGUN

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

stars

Link to comment

Share on other sites

TRIGUN

Link to comment

Share on other sites

d0ublezer0

Link to comment

Share on other sites

TRIGUN

Link to comment

Share on other sites

d0ublezer0

Link to comment

Share on other sites

d0ublezer0

Link to comment

Share on other sites

TRIGUN

Link to comment

Share on other sites

d0ublezer0

Link to comment

Share on other sites

TRIGUN

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information