Question

我必须制作一个网站导航栏。即显示当前活动页面名称的那个。例如，如果我在主页上显示

主

如果我移动到产品页面时显示

主页＆gt;产品

如果我移动到任何特定页面，请说家具，它的节目

主页＆gt;产品＆gt; 家具

和明智的一样。另外，自我解释是产品和主页的超链接。现在，当鼠标移动到主页或产品链接时，我也想要onmouseover和onmouseout事件。

一种方法是放置document.getElementById（）。但我认为如果情景就像

那样会很乏味

主页＆gt;产品＆gt;家具＆gt;表＆gt;木＆gt;计算机＆gt; Glass Top

和明智的一样。

那么有人可以给我任何解决方案吗？

以下是代码：

    <div id="navbar" style="padding:0px 0px 0px 10px;"> </div>

我创建了导航栏，然后将其称为inner div（导航栏）

var nav='',navHome='', navsep1='&nbsp;&nbsp;&gt;&nbsp;&nbsp;';

navsep1= "<span style='color:orange; font-weight:bold;'>"+navsep1+"</span>"
navHome='<a href=' + 'index.html' +' '+'id='+'navHom'+' '+'class='+'navbara' + ' ' +'style='+'font-size:1.0em;'+'color:white;' +'font-weight:bold;'+'text-decoration:none;' +' '+'title='+'Home&nbsp;page'+'>Home</a>';
navAbot="<a href='abt.html' id='navAbt' class='navbara' style='font-size:1.0em;color:white;font-weight:bold;text-decoration:none;' title='About&nbsp;Us&nbsp;page'>About Us</a>";
navServ="<a href='#' id='navSrv' class='navbara' style='font-size:1.0em;color:white;font-weight:bold;text-decoration:none;' title='You&nbsp;are&nbsp;here'>Services</a>";
nav=navHome+navsep1+navAbot+navsep1+navServ;

这就是我创建导航标签的方式。

在div（id = navbar）之后的Html（文档）页面中，我称之为sript：

document.getElementById('navbar').innerHTML=nav;
/*  http://robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/ */   
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
    oElement = arrElements[i];
    if(oRegExp.test(oElement.className)){
        arrReturnElements.push(oElement);
    }
}
return (arrReturnElements)
}

var navNodes=getElementsByClassName(document.getElementById("navbar"),"a","navbara");
//  alert(navNodes[0]+ ' '+navNodes[1]+ ' '+navNodes[2]);

for (var i = 0; i < navNodes.length-1; i++) {
    navNodes[i].onmouseover = function ()   {
    navNodes[i-1].style.color = "red";
    }

    navNodes[i].onmouseout = function ()    {
    navNodes[i-1].style.color = "white";    }
}

javascript导航流程

0 个答案: