| Tc711Com提示：[原创]JS实现导航菜单高亮 包括内容页面 ,转载请保留出处,谢谢! 实现效果:实现效果点击 新闻 的时候 能高亮. 点击新闻里面的文章的时候, 新闻 同样也能高亮出来 |
现状:
首页 新闻 音乐 文章
栏目news.htm
里面的内容链接分别是 newsshow-1.htm newsshow-2.htm
栏目music.htm
里面的内容链接分别是 musicshow-1.htm musicshow-2.htm
同类下的链接, 前缀是一样的, 这种情况下可以用下面的代码调用.
实现效果点击 新闻 的时候 能高亮. 点击新闻里面的文章的时候, 新闻 同样也能高亮出来,
HTML代码: (把下面的代码可以复制到各个链接相对应的文件里面,如: index.htm ,news.htm....),
<style>
.red A:link,.red A:visited,.red A:active{color:red;}
#red{color:red;}
</style>
<script src="js.js"></script>
<table id=menu>
<tr>
<td > <a href="index.htm"> 首页 </a> </td>
<td> <a href="news.htm"> 新闻 </a> </td>
<td> <a href="music.htm"> 音乐 </a> </td>
<td> <a href="art.htm"> 文章 </a> </td>
</tr>
</table>
JS代码: (保存为js.js)
window.onload=function(){
var menu = document.getElementById('menu');
var menuList = menu.getElementsByTagName('a');
var url = document.location.href;
var hrefUrl = '';
if(menuList==null || typeof(menuList)=='undefined')
{ return;}
var index=0;
for(;index < menuList.length;index++)
{
hrefUrl = menuList[index].href;
hrefUrl = hrefUrl.substr(hrefUrl.lastIndexOf('/')+1);
// 如果在内容页面显示出来 substr(hrefUrl.lastIndexOf('/')+1,3); 写上具体数字.
if(hrefUrl!='' && hrefUrl != '/')
{
if(url.indexOf(hrefUrl) > 0 )
{
break;
}
}
}
if(index < menuList.length)
{
menuList[index].id = 'red';
}
//转载请保留出处: tc711.com原创首发..
}
转载请保留出处: tc711.com原创首发..
更多的[原创]JS实现导航菜单高亮 包括内容页面请到论坛查看: http://BBS.TC711.COM
【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】
来源：
互联网
日期：2012-3-2
