在Javascript中，导航特效主要由以下几种实现方式：
1. 悬浮特效：当鼠标移动到导航项目上时，导航项会出现相应的特效，如变色、放大、缩小等，给用户一种互动体验的感觉。
window.onload=function(){var navbar=document.getElementById("navbar");var navli=navbar.getElementsByTagName("li");for (var i=0; i<navli.length; i++){navli[i].onmouseover=function(){this.style.backgroundColor="#f00";};navli[i].onmouseout=function(){this.style.backgroundColor="#fff";};}};在上述的代码中，我们先获取到id为navbar的导航条以及其下的所有li标签，然后用for循环为每一个li标签绑定两个事件：当鼠标移动到该li标签上时，该标签的背景色即会变成红色；当鼠标移开该标签时，该标签的背景色恢复为白色。
2. Tab选项卡效果：我们通常可以将导航条设计成Tab选项卡的形式，当用户点击某个选项卡时，相应的页面内容会显示出来，提高了用户使用网站的效率。
window.onload=function(){var tab=document.getElementById("tab");var tabli=tab.getElementsByTagName("li");var tabcon=document.getElementById("tabcon");var tabbox=tabcon.getElementsByTagName("div");for (var i=0; i<tabli.length; i++){tabli[i].index=i;tabli[i].onclick=function(){for (var j=0; j<tabli.length; j++){tabli[j].className="";tabbox[j].style.display="none";}this.className="active";tabbox[this.index].style.display="block";};}};在上述代码中，我们同样先获取到id为tab的导航条以及其下的所有li标签，同时也获取id为tabcon的内容容器下的所有div标签。然后用for循环为每一个li标签绑定点击事件，并且使得该标签的class名变为active，同时显示对应的内容div，其余的li标签的class名还原为""，对应的内容div隐藏起来。
3. 下拉菜单特效：这种导航特效也是非常常见的，在鼠标移动到主菜单选项上时，会自动弹出对应的子菜单。
window.onload=function(){var menu=document.getElementById("menu");var menuli=menu.getElementsByTagName("li");for (var i=0; i<menuli.length; i++){menuli[i].onmouseover=function(){var submenu=this.getElementsByTagName("ul")[0];submenu.style.display="block";};menuli[i].onmouseout=function(){var submenu=this.getElementsByTagName("ul")[0];submenu.style.display="none";};}};在上述代码中，我们获取到id为menu的导航条以及其下的所有li标签，在每个li标签上绑定移动鼠标进入该标签时显示对应的子菜单，移开鼠标时子菜单消失的事件。其中注意，由于每个li标签下的子菜单是一个ul标签，我们需要用getElementsByTagName获取li标签下的第一个ul标签。
以上就是Javascript中常见的导航特效方式，对于不同的网站需求和设计目的，我们可以选择不同的方式来实现。其中最关键的是我们需要深入理解Javascript的基础语法，和JS可以调用的各种DOM元素方法，才能灵活运用这些方式实现我们想要的效果。
上一篇：css按钮怎么去掉边
下一篇：css按钮怎么设置颜色
