Помогите со скриптом сворачивания текста
Привет. Никак не могу разобраться, почему не так работает скрипт.
Скрипт сворачивает и разворачивает текст. Проблема в том, что в родительских divах все работает, а во вложенных -нет. Хочу, чтобы разворачивалось и сворачивалось везде. Как это реализовать с помощью данного скрипта? Для удобства залил пример на хостинг вот код //here you place the ids of every element you want. var ids=new Array('yandex','y_site','y_program','w_site','webmoney','bank'); function switchid(id){ hideallids(); showdiv(id); } function hideallids(){ //loop through the array and hide each element by id for (var i=0;i<ids.length;i++){ hidediv(ids[i]); } } function hidediv(id) { //safe function to hide an element with a specified id if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById(id).style.display = 'none'; } else { if (document.layers) { // Netscape 4 document.id.display = 'none'; } else { // IE 4 document.all.id.style.display = 'none'; } } } function showdiv(id) { //safe function to show an element with a specified id if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById(id).style.display = 'block'; } else { if (document.layers) { // Netscape 4 document.id.display = 'block'; } else { // IE 4 document.all.id.style.display = 'block'; } } } и хтмл <p>Выбирай: <a href="javascript:switchid('yandex');">Яндекс</a> <a href="javascript:switchid('webmoney');">Вебмани</a> <a href="javascript:switchid('bank');">Банк</a> </p> <div id='yandex' style="display:none;"> <a href="javascript:switchid('y_site');">Через сайт</a><br/> <div id='y_site' style="display:none;"> <p>1</p> </div> <a href="javascript:switchid('y_program');">Через программу</a> <div id='y_program' style="display:none;"> <p>2</p> </div> </div> <div id='webmoney' style="display:none;"> <a href="javascript:switchid('w_site');">Через сайт</a><br/> <div id='w_site' style="display:none;"> <p>3</p> </div> </div> <div id='bank' style="display:none;"> <p>Yet more content. This can be anything in here, html, pictures.. flash ...</p> </div> вот еще картинка |
а с чего бы быть видимиым диву, если его родитель невидим?
вынесите вложенные дивы из родительских, и тогда они не будут скрыватся <div id='yandex' style="display:none;"> <a href="javascript:switchid('y_site');">Через сайт</a><br/> <a href="javascript:switchid('y_program');">Через программу</a> </div> <div id='y_site' style="display:none;"> <p>1</p> </div> <div id='y_program' style="display:none;"> <p>2</p> </div> PS закопайте пожалуйста скрипт там же где откопали. смотреть противно. это живой труп, буквально. либо перепишите его нормально. Вставки с коментариями "// Netscape 4" просто принципиально не имеют права на жизнь |
Спасибо огромное! Я в "современности" скриптов не разбираюсь, поскольку не знаю ява скрипт. Был бы благодарен за ссылку или совет, как его модернизировать
|
есть еще такой вариант
function switchMenu(obj) { var el = document.getElementById(obj); if ( el.style.display != 'none' ) { el.style.display = 'none'; } else { el.style.display = ''; } } function $() { var elements = new Array(); for (var i = 0; i < arguments.length; i++) { var element = arguments[i]; if (typeof element == 'string') element = document.getElementById(element); if (arguments.length == 1) return element; elements.push(element); } return elements; } function collapseAll(objs) { var i; for (i=0;i<objs.length;i++ ) { objs[i].style.display = 'none'; } } function pageLoad() { collapseAll($('yandex','y_site','y_program', 'webmoney')); } addEvent(window,'load',pageLoad); но он не совсем корректно работает - не сворачивает слои при загрузке - так и не смог его настроить Залил пример Нужно чтобы все было изначально свернуто |
Цитата:
в разделе книги есть отличные книги для изучения JS когда вы изучите JS до такой степени. чтобы понять что происходит вашем сркипте, вы сможете его модернизировать.для этого много знать не надо. краткий алгоритм(один из вариантов): при разворачивани блока, надо проврить, есть ли у него предки, из тех, что указаны в списке ID-шников. если есть, то не сворачивать их если же вы не собираетесь учить его, то можете обратится со своими вопросами в раздел работа, где при условии наличия времени и желания вам помогут за деньги. |
Спасибо
|
пожалуйста.
надеюсь, вы пойдете по более трудному и более полезному для вас пути изучения JS |
А не подскажете как можно отследить нажатие на одну из этих ссылок
<p><a href="javascript:switchid('yandex');">Яндекс</a> <a href="javascript:switchid('webmoney');">Вебмани</a> <a href="javascript:switchid('bank');">Банк</a> </p> чтобы к примеру если я нажимаю на Яндекс, то Вебмани и Банк меняли цвет (или шрифт или начертание, не важно что, любое CSS свойство) |
мне думается, что надо отслеживать клик и присваивать двум другим новые css стили. Но как это технически реализовать? Использовать тот же getElementById или elem.setAttribute? Или использовать вот этот ваш скрипт?
|
я бы скорее показывал скрытое содержимое с отступом
|
Shokoladniu,
можно модифицировать мой скрипт из упомянутой темы. только вместо выделения элемента, там надо соотвественно по циклу вделять все кроме него в вашем случае. получить элемент можно с помощью getElementById(), а отредактировать его CSS-свойства с помощью elem.style.color="red" и аналогичных |
Прочитал что конструкции вида <a href="javascript:blablalba не приветствуются, т.к. пользователи у которых он отключен, не смогут перейти по ссылке.
но как быть, когда у меня получилась конструкция <a href="javascript:switchid('yandex');" onclick="checkOn(this)">Яндекс.Деньги</a> т.е. я не могу на href поставить ссылку, т.к. у меня 2 функции используются. Какбыть? |
если ты хочешь, чтобы пользователи с отключенным javascript могли увидеть соответствующий блок, ты можешь указывать в href ссылку на страничку с содержимым блока, а в onclick показывать блок и от менять действие по умолчанию (переход по ссылке)
|
Вы немного не поняли мой вопрос - мне надо, чтобы в href была ссылка + использовать еще 2 функции swithid и checkon. Одну - в onclick, а вторую куда?
|
туда же
|
:)
т.е. просто <a href="/yandex.html" onclick="switchid('yandex');checkOn(this); return false;">Яндекс.Деньги</a> |
насколько я понимаю, в yandex.html содержится та же информация, что показывается при щелчке на ссылке (если javascript включен)
если так, тогда да p.s. непонятно только зачем checkOn |
да, в yandex.html тоже самое, что отображается при клике, а чекон, для того чтобы выделять активную ссылку
|
Часовой пояс GMT +3, время: 18:27. |