ок добументу. p> Logo - перший логотип.
Header-Text - текст заголовку.
Logo2 - другий логотип.
Content - блок для відображення основного змісту сторінки.
Menu - список Категорій ІНФОРМАЦІЇ якові можна дізнатіся.
My_iframe - інформація з вібраної категорії.
Footer - блок для банеру або реклами.
Для реалізації відображення ІНФОРМАЦІЇ на вибір користувача, вікорістаємо CSS та JavaScript. CSS - для Вибори режиму відображення блоків ІНФОРМАЦІЇ у блоці My_iframe, Які слідують один за одним послідовно та представляються відповідні категорії у блоці Menu. JavaScript - за для відображення позбав потрібного блоку.
Реалізація у CSS:
. iframe_content_block
{
display: block;
text-decoration: none;
font-family: Arial;
font-style: italic;
font-weight: bold;
font-size: 16px;
color: # 1f2f7f;
position: relative;
width: 100%;
}
В
. iframe_content_none
{
display: none;
text-decoration: none;
font-family: Arial;
font-style: italic;
font-weight: bold;
font-size: 16px;
color: # 1f2f7f;
position: relative;
width: 100%;
}
Тут display: none та display: block дозволяє та забороняє відображення блоку з відповіднімі класами . iframe_content_none та . iframe_content_ block . Зміна класів блоків здійснюється за помощью JavaScript.
Реалізація у JavaScript:
function menu (menu_id)
{
for (var i = Number (1); i <= 6; i + +)
document.getElementById ("if_c_" + i). className =
"iframe_content_none";
switch (Number (menu_id))
{
case 1: document.getElementById ("if_c_1"). className =
"iframe_content_block"; break;
case 2: document.getElementById ("if_c_2"). className =
"iframe_content_block"; break;
case 3: document.getElementById ("if_c_3"). className =
"iframe_content_block"; break;
case 4: document.getElementById ("if_c_4"). className =
"iframe_content_block"; break;
case 5: document.getElementById ("if_c_5"). className =
"iframe_content_block"; break;
case 6: document.getElementById ("if_c_6"). className =
"iframe_content_block"; break;
}
}
Функція document.getElementById ("ім'я_елементу") вертає єлемент у Якого id = "ім'я_елементу" , вікорістовуючі Цю функцію ми змінюємо клас усіх наявних єлементів на тій что їх ховає. При умові что єлементі мают імена:
if_c_1, if_c_ 2, if_c_ 3, if_c_ 4, if_c_ 5, if_c_ 6. Остання цифра ціх імен задається змінною i яка перебірається у ціклі:
for (var i = Number (1); i <= 6; i + +)
document.getElementById ("if_c_" + i). className =
"iframe_content_none";
Потім вікорістовуючі оператор switch ми міняємо клас одного потрібного нам блоку на такий что дозволяє йо відображаті. br/>
switch (Number (menu_id))
{
case 1: document.getElementById ("if_c_1"). className =
"iframe_content_block"; break;
case 2: document.getElementById ("if_c_2"). className =
"iframe_content_block"; break;
case 3: document.getElementById ("if_c_3"). className =
"iframe_content_block"; break;
case 4: document.getElementById ("if_c_4"). className =
"iframe_content_block"; break;
case 5: document.getElementById ("if_c_5"). className =
"iframe_content_block"; break;
case 6: document.getElementById ("if_c_6"). className =
"iframe_content_block"; break;
}
Зміна кількості розділів веде до Зміни коду. Наприклад внас є позбав два розділи: if_c_ 1 та if_c_2 . Код скрипту буде зміненій на:
function menu (menu_id)
{
for (var i = Number (1); i <= 2; i + +)
document.getElementById ("if_c_" + i). className =
"iframe_content_none";
switch (Number (menu_id))
{
case 1: document.getElementById ("...
