chaihongjun.me

一款简单的导航菜单纯JS点击效果

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)

知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:柴宏俊»