Есть два линка 1. English 2. Russian А также два текстовых поля(diva) Т. е. скажем, текстовые дивы имеют position: absolute, для размещения одного над другим. Вначале, отображается только верхний div(английский текст), а при нажатии на линк Russian - английский div перестает отображаться, а вместо него начинает отображаться русский div. И наоборот.
есть две чашки: в одной чашке кофе, в другой чай. Добавлено спустя 44 секунды: это я к тому, что у вас нет ни одного вопросительного знака в вашем посте.
в идеале менять содержимое дива, а не видимость одного из двух. но можно и так. $('#divid1').hide(); $('#divid2').show();
нет, я ленивый =) а в чем вопросы остались? вы не хотите сделать это сами и хотите чтобы я вам дал готовое решение? ну это не сложно. просто я ленивый.
вам надо добавить диву css display: none; или добавить класс с таким css но лучше подменять содержимое. аяксом.
Вот код страницы, ... Код (Text): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <head> <link rel="stylesheet" href="print.css" type="text/css" media="print" /> <title>Page</title> <style type="text/css" media="screen" id="test"> #english {cursor: pointer;} #russian {cursor: pointer;} #redbox {width: 300px; height: 200px; background-color: red; display: block;} #bluebox {width: 300px; height: 200px; background-color: blue; display: block;} </style> <!-- <script type="text/javascript"> function changeText(redbox) { if(document.getElementById('redbox').style.display="block";) document.getElementById('redbox').style.display="none"; } </script> --> </head> <body> <div id="english" onclick="document.getElementById('redbox').style.display='none';">english</div> <div id="russian" onclick="document.getElementById('bluebox').style.display='none';">russian</div> <div id="redbox"></div> <div id="bluebox"></div> </body>
От фанаря написал: Код (PHP): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Page</title> <style type="text/css"> #english, #russian{cursor:pointer;} #russian{display:none;} #redbox, #bluebox{width:300px;height:200px;} #redbox{background:#ff0000;} #bluebox{background:#0000ff;display:none;} </style> <script type="text/javascript"> var arrayClick=[]; arrayClick['english']='redbox'; arrayClick['russian']='bluebox'; function clicked(_this) { document.getElementById(_this.id).onclick=function() { for(var i in arrayClick) { if(i===this.id) { this.style.display='none'; document.getElementById(arrayClick[this.id]).style.display='none'; } else { document.getElementById(i).style.display='block'; document.getElementById(arrayClick[i]).style.display='block'; } } }; } </script> </head> <body> <div id="english" onclick="clicked(this)">english</div> <div id="russian" onclick="clicked(this)">russian</div> <div id="redbox">English</div> <div id="bluebox">Russian</div> </body> </html>
Спасибо Your, а если мне надо чтобы линки не чередовались, а были видны оба сразу. Как можно сделать? Сейчас так А надо так
Да это вообще никакие не линки =) А дивы. Вам нужно, чтобы только менялась часть ниже? P.S. я все сделал в кучу, чтобы все менялось!
он продолжает называть вещи СВОИМИ именами))) у него были линки, решение на дивах, а вопрос в том как сделать чтоб обе ШТУКИ были видны =)
Да, чтобы менялась только нижняя часть(красно синяя). (т.е. 'языковое меню' не менялось, видно оба дива)
ну не прячь ссылки тогда. Код (Text): <script type="text/javascript"> var arrayClick=[]; arrayClick['english']='redbox'; arrayClick['russian']='bluebox'; function clicked(_this) { document.getElementById(_this.id).onclick=function() { for(var i in arrayClick) { if(i===this.id) { //this.style.display='none'; document.getElementById(arrayClick[this.id]).style.display='none'; } else { //document.getElementById(i).style.display='block'; document.getElementById(arrayClick[i]).style.display='block'; } } }; } </script>
Так опять же видно только один див(язык) Кстати, почему в этом коде (который без закомментированных строк) При первом клике на див ничего не просиходит, срабатывает только при втором и последующих. т.е. если нажать на див(english-меню) срабатывает только на второй раз, потом его заменяет див(russian-меню) и он тоже срабатывает только на второй раз, дальше нормально
Упс! Простите! Это потому, что я сначала делал через document.getElementById('ид').onclick а потом это скопирывал и вставил в функцию забыв, о том, что это уже новый объект для вызова по событию onclick у элемента div. Вот так надо видимо: Код (PHP): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Page</title> <style type="text/css"> #container{height:30px;} #container #english, #container #russian{cursor:pointer;float:left;margin:0 20px 0 0;} #redbox, #bluebox{width:300px;height:200px;} #redbox{background:#ff0000;} #bluebox{background:#0000ff;display:none;} </style> <script type="text/javascript"> var arrayClick=[]; arrayClick['english']='redbox'; arrayClick['russian']='bluebox'; function type(variable,type) { if('undefined'===typeof type) { return 'undefined'!==typeof variable; } else { return type===typeof variable; } } function clicked(self) { if(type(self) && type(self,'object')) { for(var i in arrayClick) { if(i===self.id) { document.getElementById(arrayClick[self.id]).style.display='none'; } else { document.getElementById(arrayClick[i]).style.display='block'; } } } } </script> </head> <body> <div id="container"> <div id="english" onclick="clicked(this)"> english </div> <div id="russian" onclick="clicked(this)"> russian </div> </div> <div id="redbox">English</div> <div id="bluebox">Russian</div> </body> </html> ?
Вот, спасибо Your. Теперь бы решить вопрос с active выделением в меню... ))) (т. е. активный div-меню - underline или color)
Что-то я не понял, это же active, а не hover ... Сейчас же отображаются сразу оба пункта меню(div-a) Он же должен зависеть от div-a(redbox, bluebox) и в зависимости от того какой пункт меню активный - отображается либо redbox, либо bluebox ?
по нажатию на див с названием языка происходит смена дивов с данными? да. вот теперь прикиньте стиль и чуток перепишите код чтоб и дивы языков меняли свой вид