По-маленьку приходится осваивать javascript. Потому что для некоторых задач слишком громоздко писать php-код.
На одной из страниц сайта недвижимости есть две формы «купить» и «снять». Они находятся в одном блоке. Одна активна, другая скрыта. Надо оформить переключение между ними.
Все поля форм похожи. Поэтому делаю один блок с формой. И добавляю скрытое поле, в котором будет фиксироваться один из двух вариантов.
< input type="hidden" id="cell" value="kupit" >
В css прописываю два класса для вкладок on и off, при активном и неактивном их состоянии:
.on {
background: #E3E3E3;
color: #0C6D3F;
}
.off {
color: white;
background: #C8C8C8;
cursor: pointer;
}
Задаю функции в атрибутах онклик:
< div id="find-box-kupit" class="on" onclick="click_kupit()" >
Купить недвижимость
< /div >
< div id="find-box-arenda" class="off" onclick="click_arenda()" >
Арендовать недвижимость
< /div >
И прописываю эти функции в javascript-врезке.
< script language="JavaScript" >
function click_kupit() {
$('#find-box-kupit').attr('class', 'on');
$('#find-box-arenda').attr('class', 'off');
$('#cell').attr('value', 'kupit');
}
function click_arenda() {
$('#find-box-kupit').attr('class', 'off');
$('#find-box-arenda').attr('class', 'on');
$('#cell').attr('value', 'arenda');
}
< /script >
Возможно, это не окончательное решение. Но суть понятна.
Использую javascript-библиотеку jQuery. Вычитал у Александра Климова возможность подключения последней версии библиотеки из первоисточника.
В качестве справочника по jQuery использую xhtml.co.il.
В css использую свойство cursor. Похоже, Оперой это не поддерживается. Проверю. М.б., придется поправить css или html.
И, наверняка, есть более простые или изящные решения. Например, в яндекс.картах понравилось использование короткой записи выражения if:
container.css('display', (container.css('display') == 'none') ? ' ' : 'none');Хотя, как говорится, самая короткая дорога та, которую знает водитель.
