HTML鼠标移至导航栏触发链接，保存当前的导航位置

在HTML界面的导航栏中，设置鼠标移动到元素上面就改变颜色，同时鼠标无需点击直接触发链接，在一个iframe中显示对应界面内容；当鼠标移开后，此刻iframe界面中对应于导航栏中的元素颜色不变，直到进入其他链接界面时元素颜色才变回原样。

 

 当移动鼠标的下一个元素时：

鼠标移开到其他区域：

代码实现：

HTML：

<ul class="menu" > <br>
    <li  class="menuchild" ><a id="alluser" href="page/alluser.html" target='mainframe' onmouseover="ona(this)" onmouseout="outa()"  >所有用户</a></li>
    <li  class="menuchild" ><a id="apply" href="page/apply.html" target='mainframe' onmouseover="ona(this)" onmouseout="outa()" >注册申请</a></li>
    <li  class="menuchild" ><a id="password" href="page/password.html" target='mainframe' onmouseover="ona(this)" onmouseout="outa()" >修改密码</a></li>
    <li  class="menuchild" ><a id="note" href="page/note.html" target='mainframe' onmouseover="ona(this)" onmouseout="outa()" >更新记录</a></li>
    </ul>
<iframe id="iframeid" name="mainframe" class="mainoption" src="page/apply.html">
</iframe>

js代码：

function ona(x){
    x.style.color = "rgb(66, 202, 199)";
    y = document.getElementById("iframeid");
    y.src = x.href;
}

function outa(){
    var x = new Array();
    x[0] = document.getElementById("alluser");
    x[1] = document.getElementById("apply");
    x[2] = document.getElementById("password");
    x[3] = document.getElementById("note");
    y = document.getElementById("iframeid");

    for (var i=0;i<x.length;i++){
        if( y.src != x[i].href ){
            x[i].style.color = "white";
        }
    }
}

注：虽然实现了功能，但是在JS中定义了数组元素，一个一个得获取URL的方式总感觉不合适，不利于后期代码的扩展和维护，若以后学习到了更好的方法，再来补充。

2018/12/03

---