HTML sample:
<nav class="topnav" id="topnav"> <a href="/index.html" id="topnav_current"><span>首页</span><span class="en">Protal</span></a> <a href="/zhimengbiji/"><span>织梦笔记</span><span class="en">Life</span></a> <a href="/xuewuzhijing/"><span>学无止境</span><span class="en">Learn</span></a> <a href="/liuyanban/"><span>留言版</span><span class="en">Guestbook</span></a> </nav>
CSS:
nav { float: right; width: 100%; margin: 30px 0 0 0; text-align: right; } #topnav_current { color: #E999B4; } .topnav a { margin: 0 5px; padding: 0 8px; } a:link, a:visited { text-decoration: none; } nav a { position: relative; display: inline-block; font-size: 18px; font-family: "微软雅黑"; } .topnav a span:first-child { z-index: 2; display: block; } .topnav a span:last-child { z-index: 1; display: block; color: #999; font: 12px Georgia, serif; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); text-align: center;
JS:
var obj=null; var As=document.getElementById('topnav').getElementsByTagName('a'); obj = As[0]; for(i=1;i<As.length;i++){if(window.location.href.indexOf(As[i].href)>=0) obj=As[i];} obj.id='topnav_current'
当点击菜单的时候,A标签将被添加一个ID(topnav_current)。
As数组存放topnav下的全部A标签对象,初始化将第一个A对象赋予obj,然后循环判断当前页面的URL,如果当前页面URL包含有所属A标签的href值的时候,表示这个A标签被点击(打开了A标签对应的栏目了),然后给这个A对象添加一个ID(topnav_current)