导航栏

Question

function navigationBar(a,b){
document.getElementById(a).style.backgroundColor="#FF0088";
if(b == 0){
for(var i=0;i<=7;i++){
var abc = "navigationSpan" + i;
document.getElementById(abc).style.backgroundColor="";
}
document.getElementById(a).style.backgroundColor="#FF0088";
}
}
function navigationBarDiv(){
for(var i=0;i<=7;i++){
var abc = "navigationSpan" + i;
document.getElementById(abc).style.backgroundColor="";
}
document.getElementById('navigationSpan0').style.backgroundColor="#FF0088";
}<div id="navigationBar">
<div id="navigationBars" onmouseout="navigationBarDiv()">
<span class="navigationBarSpan" id="navigationSpan0"><a class="navigationBara" href="">信息主页</a></span>
<span class="navigationBarSpan" id="navigationSpan1"><a class="navigationBara" href="" onmouseover="navigationBar('navigationSpan1',0)" onmouseout="navigationBar('navigationSpan1',1)">招聘</a></span>
<span class="navigationBarSpan" id="navigationSpan2"><a class="navigationBara" href="" onmouseover="navigationBar('navigationSpan2',0)" onmouseout="navigationBar('navigationSpan2',1)">二手房</a></span></div>
</div>
我在除了“onmouseover”导航栏第一个选项以外，在其他选项之间切换总是显示一下第一个选项。请问怎么让在选项之间切换时不显示一下第一个导航选项，并且在如果离开“div”时候回复到选择第一个选项。导航

Answer 1

html代码部分在最后在个</div>

Answer 2

function navigationBarDiv(){
    for(var i=0;i<=7;i++){
        var abc = "navigationSpan" + i;
        document.getElementById(abc).style.backgroundColor="";
    }
    //document.getElementById('navigationSpan0').style.backgroundColor="#FF0088"; 问题出在这句上
}
将那句代码注释即可

Answer 3

您回答的不对，因为我想要的是在鼠标离开div后自动恢复到原始状态。（也就是回到第一个上）

Answer 4

LZ可以这样修改：
加一个变量var execDivMouseOver = null;加一个方法function ExecDivMouseOver() {
    execDivMouseOver = setTimeout('navigationBarDiv();', 1000);
}function navigationBar(a,b){
    clearTimeout(execDivMouseOver);
    document.getElementById(a).style.backgroundColor="#FF0088";
    if(b == 0){
        for(var i=0;i<=7;i++){
            var abc = "navigationSpan" + i;
            document.getElementById(abc).style.backgroundColor="";
        }
        document.getElementById(a).style.backgroundColor="#FF0088";
    }
}<div id="navigationBar">
<div id="navigationBars" onmouseout="ExecDivMouseOver()">
<span class="navigationBarSpan" id="navigationSpan0"><a class="navigationBara" href="">信息主页</a></span>
<span class="navigationBarSpan" id="navigationSpan1"><a class="navigationBara" href="" onmouseover="navigationBar('navigationSpan1',0)" onmouseout="navigationBar('navigationSpan1',1)">招聘</a></span>
<span class="navigationBarSpan" id="navigationSpan2"><a class="navigationBara" href="" onmouseover="navigationBar('navigationSpan2',0)" onmouseout="navigationBar('navigationSpan2',1)">二手房</a></span></div>

Answer 5

您回答的不对，因为我想要的是在鼠标离开div后自动恢复到原始状态。（也就是回到第一个上）我和你原来是一样的想法。效果和我想的不一样。
我想要的是在onmouseover某个span时背景变粉，移到另一个span时不显示第一个span的粉色。
当鼠标离开div时回复到第一个span的粉色。html代码部分也可以改。

Answer 6

http://www.aol.com/
就是这个网站的导航栏

Answer 7

您回答的不对，因为我想要的是在鼠标离开div后自动恢复到原始状态。（也就是回到第一个上）我和你原来是一样的想法。效果和我想的不一样。
我想要的是在onmouseover某个span时背景变粉，移到另一个span时不显示第一个span的粉色。
当鼠标离开div时回复到第一个span的粉色。html代码部分也可以改。LZ，我第四楼贴出的代码，应该可以满足你的需求。
问题出在外层DIV的MOUSEOVER事件上，即内部DIV事件触发后，都会触发外层事件。比较常见的做法就是关闭冒泡触发。
我的做法是延迟外层DIV事件的触发，如果鼠标在外层DIV内容移动，则外层DIV的事件不触发；反之鼠标离开DIV后，触发外层DIV事件

Answer 8

您回答的不对，因为我想要的是在鼠标离开div后自动恢复到原始状态。（也就是回到第一个上）我和你原来是一样的想法。效果和我想的不一样。
我想要的是在onmouseover某个span时背景变粉，移到另一个span时不显示第一个span的粉色。
当鼠标离开div时回复到第一个span的粉色。html代码部分也可以改。LZ，我第四楼贴出的代码，应该可以满足你的需求。
问题出在外层DIV的MOUSEOVER事件上，即内部DIV事件触发后，都会触发外层事件。比较常见的做法就是关闭冒泡触发。
我的做法是延迟外层DIV事件的触发，如果鼠标在外层DIV内容移动，则外层DIV的事件不触发；反之鼠标离开DIV后，触发外层DIV事件
非常感谢您。给您20分