Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.07.2013, 17:02
Новичок на форуме
Отправить личное сообщение для Илья Дементьев Посмотреть профиль Найти все сообщения от Илья Дементьев
 
Регистрация: 17.07.2013
Сообщений: 2

Скрытый текст и замена css
Привет всем.
В процессе верстки макета появилась такая проблема: имеется 2 ссылки (http://s5.uploads.ru/Kk13v.png) и при нажатии на одну из них под ней должен появляться еще один див с формой и стиль кнопки меняться на другой (примерно так http://s5.uploads.ru/8B1VG.png ). Но как это сделать совершенно не представляю...
В JS нуб - не разу с ним не работал и мои знания останавливаются на "знаю что это такое".

Прошу дать код без того что должно быть в диве (где по сути должна быть форма входа / регистрации ) и конечно же все стили сам настрою.

Спасибо заранее.
Ответить с цитированием
  #2 (permalink)  
Старый 17.07.2013, 17:20
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Илья Дементьев, на ссылку ставьте 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';
}

Последний раз редактировалось ruslan_mart, 17.07.2013 в 17:32.
Ответить с цитированием
  #3 (permalink)  
Старый 17.07.2013, 18:21
Новичок на форуме
Отправить личное сообщение для Илья Дементьев Посмотреть профиль Найти все сообщения от Илья Дементьев
 
Регистрация: 17.07.2013
Сообщений: 2

Спасибо большое!
Спасибо вам огромное! Правда я нашел пару опечаток у вас)
Вы пишите "на ссылку ставьте onclick="signShow(this)..." а в js: "function singShow (a) ..."
И еще: "a.className = c[1] ? c[0] : a.className + ' sing_show';" и "класс стиля для активной кнопки, например sign_show."
И наконец-то я сделал это, спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Отследить клик по дочернему объекту AllanZ jQuery 3 05.09.2012 12:38
Выравнять три дива в одной строке debugx (X)HTML/CSS 9 06.10.2011 12:03
Вопрос по относительному позиционированию DIV XPOMOB (X)HTML/CSS 11 15.07.2009 17:02