Jump to content
  • 0

Смена блоков


TRIGUN
 Share

Question

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

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

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

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

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

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

——————-

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

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

Весь смысл:

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

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

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

<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>

Link to comment
Share on other sites

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

<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. И куда спасибо тыкнуть?:)

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy