В этой статье описывается метод реализации меню навигации по многооперационным переключениям с помощью JS. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Кода -копия выглядит следующим образом:
<html>
<голова>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">
<TILE> Меню навигации с несколькими опциями </title>
</head>
<стиль типа = "text/css">
#dnavbar {
фоновый цвет: #ffffff;
}
#dnavbar li {
тип списка: нет;
Плавание: осталось;
Ширина: 84px;
Высота: 28px;
высота линии: 28px;
размер шрифта: 12px;
Цвет: #ffffff;
Граница: 1px solid #ffffff;
Фон:#86c2ff;
Текст-альбом: Центр;
дисплей: блок;
курсор: указатель;
}
#submenu {
Фон:#99CC66;
Ширина: 500px;
РЕМЖЕР-ЛЕРФ: 1PX SOLID #FFFFFF;
граница правая: 1px solid #ffffff;
Высота: 29px;
высота линии: 29px;
Цвет: #ffffff;
размер шрифта: 12px;
Лебь накладки: 10px;
}
тело {
поля: 0px;
}
A: Ссылка, A: Посещение {
Цвет: #ffffff;
Текстовое декорация: нет;
}
A: Hover {
Цвет: #ffffff;
Текстовое декорация: нет;
}
</style>
<script language = "javascript">
Функция Showmenu ()
{
var barctt = document.getElementByIdx_x ("dnavbar")
var liarr = barctt.getelementsbytagname_r ("li")
var links = new Array ()
Ссылки [0] = "<a href = '#'> Текущее местоположение: домашняя страница"
Ссылки [1] = "<a href = '#'> Project 1 </a> | <a href = '#'> Project 2 </a> | <a href = '#'> Project 3 </a> | <a href = '#'> Проект 4 </a>"
Ссылки [2] = "<a href = '#'> Project 1 </a> | <a href = '#'> Project 2 </a> | <a href = '#'> Project 3 </a>"
Ссылки [3] = "<a href = '#'> Project 1 </a> | <a href = '#'> Project 2 </a> | <a href = '#'> Проект 3 </a> | <a href = '#'> Проект 4 </a> | <a href = '#'> Project 5 </a>"
Ссылки [4] = "<a href = '#'> Проект 1 </a> | <a href = '#'> Project 2 </a>"
Ссылки [5] = "<a href = '#'> Project 1 </a> | <a href = '#'> Project 2 </a> | <a href = '#'> Project 3 </a>"
Ссылки [6] = "<a href = '#'> Проект 1 </a> | <a href = '#'> Project 2 </a>"
Ссылки [7] = "<a href = '#'> Проект 1 </a> | <a href = '#'> Project 2 </a>"
Ссылки [8] = "<a href = '#'> Проект 1 </a> | <a href = '#'> Project 2 </a>"
Ссылки [9] = "<a href = '#'> Проект 1 </a> | <a href = '#'> Project 2 </a>"
Ссылки [10] = "<a href = '#'> Проект 1 </a> | <a href = '#'> Project 2 </a>"
Ссылки [11] = "<a href = '#'> Проект 1 </a> | <a href = '#'> Проект 2 </a>"
Ссылки [12] = "<a href = '#'> Проект 1 </a> | <a href = '#'> Проект 2 </a>"
для (i = 0; i <liarr.length; i ++)
{
Liarr [i] .onclick = function ()
{
SELECTTHIS (это, Liarr, ссылки)
}
}
}
Функция SELECTTHIS (Indexobj, Allli, InfoArr)
{
var index = 0;
для (i = 0; i <allli.length; i ++)
{
allli [i] .style.border = "1px solid #ffffff";
allli [i] .style.backgroundcolor = "#86c2ff";
allli [i] .style.height = "28px";
if (indexobj == allli [i])
{
index = i;
}
}
indexobj.style.borderbottom = "0px solid #666688";
indexobj.style.backgroundcolor = "#99CC66";
indexobj.style.height = "31px";
document.getElementbyIdx_x ("submenu"). innerhtml = infoArr [index];
}
</script>
<body onload = "showmenu ()">
<div id = "dnavbar" style = "float: none; ширина: 560px;"> <li> home </li> <li> Entertainment Express </li> <li> Music World </li> <li> Flash </li>
</div>
<div id = "submenu"> Объявление по делам сайта </div>
</body>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.