[原创]JS实现导航菜单高亮 包括内容页面
来源:
互联网
日期:2012-3-2
|
|
|
|
|
我们针对各种网店的需求,提供具有专业针对性的智能网店。集易用性和强大功能为一体,支持静态HTML生成和搜索优化、个性化模版定制、强大的网店管理系统和各种专业网店功能...点此申请
|
|
|
|
|
|
智能建站已经成为企业网站建设的主要方式,建立个性化企业网站是企业品牌形象的体现;具有强大灵活的网站功能、HTML生成、搜索引擎优化,现有简体、繁体、英文、日文等多国语言可选用。赶快申请,立即拥有个性化企业网站... |
|
|
|
|
|
三语易站是国内受众最广泛的傻瓜式自助建站系统。只要会打字就可以建站,支持简繁英三语,简繁自动转换;具有单页、文章、图文、下载等网站内容管理功能,自定义栏目内容设置,管理系统简单易用,适合企业个人自助创建和管理网站...点此申请
|
|
|
|
|
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原创首发..
精品网站程序下载(草根站长最爱)
QQ2013,QQ2012临时会话插件(全国首发)
711旅游网站管理系统V2013(无功能限制)
711幻灯片管理系统(全国首发) 各类网站程序下载
711企业网站管理系统V2013个人版(无功能限制)
711免费在线客服系统个人版 V2.0
电影小偷采集程序V2013免费下载 点此查看
更多的[原创]JS实现导航菜单高亮 包括内容页面请到论坛查看: http://BBS.TC711.COM
【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】
来源:
互联网
日期:2012-3-2
|
|
|