导航栏切换效果案例

最新推荐文章于 2023-12-04 18:11:43 发布

weixin_34123613

最新推荐文章于 2023-12-04 18:11:43 发布

阅读量160

点赞数

原文链接：http://www.cnblogs.com/lujieting/p/10058724.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #list li {
            list-style-type: none;
            width: 80px;
            height: 30px;
            line-height: 30px;
            background-color: beige;
            text-align: center;
            float: left;
            margin-left: 5px;
        }

        #list li.current {
            background-color: burlywood;
        }

        #list li a {
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="menu">
    <ul id="list">
        <li class="current"><a href="http://www.baidu.com">首页</a>
        </li>
        <li><a href="javascript:void(0)">播客</a></li>
        <li><a href="javascript:void(0)">博客</a></li>
        <li><a href="javascript:void(0)">相册</a></li>
        <li><a href="javascript:void(0)">关于</a></li>
        <li><a href="javascript:void(0)">帮助</a></li>
    </ul>
</div>
<script src="../DOM/commer.js"></script>
<script>
    //获取所有li标签
    var liObj=ver("list").getElementsByTagName("li");
    //循环遍历，找到每个li中的a标签，注册点击事件
    for(var i=0;i<liObj.length;i++){
        //每个li中的a标签
        var aObj=getFirstElement(liObj[i]);
        aObj.οnclick=function () {
            //把所有的a所在的li的所有的兄弟元素的类样式全部移除
            for(var j=0;j<liObj.length;j++){
                liObj[j].removeAttribute("class");
            }
            //当前点击的a的父级元素li(点击的这个a所在的父级元素li)，设置背景颜色
            this.parentNode.className="current";
            return false;
        }
    }
</script>
</body>
</html>

转载于:https://www.cnblogs.com/lujieting/p/10058724.html

weixin_34123613

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导航栏切换效果案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #list li { list-style-type: none; ...
复制链接

扫一扫