1NetMedia_Blog

<< getElementsByName和getElementB...  类别: Html 名片礼仪 >>
关于设置当前页面导航条样式的问题
[ 日期: 2007-09-14 2:32:30 PM | 作者: admin | 来源: 本站整理 | 人气:32170 | 晴天 | 心情: +2 ] 字号: 【
急速栏目链接:
标签:
经常看到一些网站的导航条突出显示当前页面栏目项,酷!
现研究了下,根据取地址栏当前页面文件名和对应导航中连接地址可以实现,爽啊,实现静态页也可以使用该效果,!现和大家分享。

<table width=100% height="28" border=0 align="center" cellpadding=0 cellspacing=0 bordercolor=#111111>
<tbody>
<tr>
<td height="30" colspan="5" align="center">假设当前页面为 <span style="color:#ff0000;">index.html</span></td>
</tr>
<tr>
<td><div align="center"><a href="/设置当前页面导航突显示例.htm" name=submenuitem><span class="daohangblack">首页</span></a></div></td>
<td><div align="center"><a href="/index.html" name=submenuitem><span class="daohangblack">其他</span></a></div></td>
<td><div align="center"><a href="/qt.html" name=submenuitem><span class="daohangblack">其他</span></a></div></td>
<td><div align="center"><a href="/qt.html" name=submenuitem><span class="daohangblack">其他</span></a></div></td>
<td><div align="center"><a href="/qt.html" name=submenuitem><span class="daohangblack">其他</span></a></div></td>
</tr>
</tbody>
</table>
<script language=javascript>
  var os = document.getElementsByName("submenuitem");
  var sUrl = location.pathname.toLowerCase();
  for(var i=0;i<os.length;++i){
    var shref = os[i].href.toLowerCase();
    if(shref.match(sUrl)){
      os[i].style.backgroundColor="#ff0000";
    }
  }
</script>
   
Rss Comment  

没有相关评论

发表评论
请先注册,才能发表评论!
- 注册 -