Скрытый текст и замена css
Привет всем.
В процессе верстки макета появилась такая проблема: имеется 2 ссылки (http://s5.uploads.ru/Kk13v.png) и при нажатии на одну из них под ней должен появляться еще один див с формой и стиль кнопки меняться на другой (примерно так http://s5.uploads.ru/8B1VG.png ). Но как это сделать совершенно не представляю... В JS нуб - не разу с ним не работал и мои знания останавливаются на "знаю что это такое". Прошу дать код без того что должно быть в диве (где по сути должна быть форма входа / регистрации ) и конечно же все стили сам настрою. Спасибо заранее. |
Илья Дементьев, на ссылку ставьте onclick="signShow(this)". Создайте отдельный класс стиля для активной кнопки, например sign_show. Так же создайте div самой формы и дайте ей ID, например id="sing_form", в стилях для неё задайте display: none.
А javascript можно написать такой: function singShow(elem) { var a = document.getElementById('sing_form'); //Получаем саму форму и записываем её объект в переменную "a". /*Проверяем скрыта ли форма, или нет*/ if(a.style.display == 'none') //Если скрыта { a.style.display == ''; //Делаем форму видимой elem.className += ' sing_show'; //Добавляем на нажатую кнопку класс sing_show. } else //Если не скрыта (видима) { a.style.display == 'none'; //Скрываем форму a.className = a.className.split(' ')[0]; //Убираем класс sing_show с нажатой кнопки. } } А для простоты кода можно написать так (без обьяснений): function singShow(a) { var b = document.getElementById('sing_form').style, c = a.className.split(' ');; b.display = b.display == 'none' ? '' : 'none'; a.className = c[1] ? c[0] : a.className + ' sing_show'; } |
Спасибо большое!
Спасибо вам огромное! Правда я нашел пару опечаток у вас)
Вы пишите "на ссылку ставьте onclick="signShow(this)..." а в js: "function singShow (a) ..." И еще: "a.className = c[1] ? c[0] : a.className + ' sing_show';" и "класс стиля для активной кнопки, например sign_show." И наконец-то я сделал это, спасибо! :) |
Часовой пояс GMT +3, время: 14:46. |