使用HTML+CSS+JavaScript实现导航栏

山小嗨

已于 2024-06-28 18:10:19 修改

阅读量941

点赞数 8

文章标签： html 前端 css javascript

于 2024-05-22 13:34:30 首次发布

本文链接：https://blog.csdn.net/2301_81034686/article/details/139114246

版权

前言

我们有时候在浏览网页的时候可以看到可以看到，当鼠标点击导航栏的时候，被点击的菜单项的显示形式与其他菜单项不同。可能是背景样式有所不同，也可能是菜单项底部高亮等情况。这种设计可以让用户得知自己浏览的是网页的那个部分的内容。

在网页设计中，有多种方法可以实现这种效果。下面使用的是简单的HTML+CSS+JavaScript知识来设计出相同的效果。

方法思考

1.基本文档

在HTML文档中，使用<ul>创建一个无序列表，把菜单项放入<li>元素中。给每一个<li>设置属性，便于JavaScript准确获取元素并且不会影响到文档中的其他<li>元素。

2.样式设计

网页的导航栏和菜单项是有宽度和高度的，通过CSS可以设置其宽和高。同时，给菜单项设置底部边框并且将其颜色设置为透明，将第一个菜单项底部设置高亮。

3.事件处理

给<li>设置点击(onclick)事件，通过点击触发高亮转移脚本。

在脚本中，定义高亮转移函数。

在函数中，使用 getElementsByName() 返回<li>元素集合。使用循环把<li>元素的底部边框颜色设置为透明，再将被点击的<li>元素底部设置高亮，最终实现高亮转移。

代码实现

<!DOCTYPE html>
<html lang="zn-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            /* 设置导航栏的宽和高 */
            width: 600px;
            height: 30px;
        }
        ul {
            margin: 0;
            padding: 0;
            /* 消除标记列表项 */
            list-style-type: none;
        }
        ul li {
            /* 将<li>元素横向排列 */
            float: left;

            width: 50px;
            height: auto;
            text-align: center;

            /* 设置<li>底部边框 */
            border-bottom: 2px solid transparent;

            margin: 2px;

            /* 当鼠标悬停在<li>元素上时以手指形式显示 */
            cursor: pointer;
        }
        li:first-child {
            /* 将第一个<li>底部设置高亮 */
            border-bottom-color: dodgerblue;
        }
    </style>

</head>
<body>
    <div>
        <ul>
            <!-- 当点击<li>元素时触发函数 light(obj) -->
            <li name="ch" onclick="light(this)" >1</li>
            <li name="ch" onclick="light(this)" >2</li>
            <li name="ch" onclick="light(this)" >3</li>
            <li name="ch" onclick="light(this)" >4</li>
            <li name="ch" onclick="light(this)" >5</li>
            <li name="ch" onclick="light(this)" >6</li>
            <li name="ch" onclick="light(this)" >7</li>
            <li name="ch" onclick="light(this)" >8</li>
            <li name="ch" onclick="light(this)" >9</li>
            <li name="ch" onclick="light(this)" >10</li>
        </ul>
        <script>
            function light(obj) {
                // 通过 name 属性准确获取全部<li>元素，防止影响到文档中其他<li>元素
                var liarr = document.getElementsByName("ch")
                for(let index = 0;index < liarr.length; index++) {
                    // 将<li>元素底部颜色设为空白
                    liarr[index].style.borderBottomColor = "transparent";
                }
                //被点击的<li>元素底部高亮
                obj.style.borderBottomColor = "dodgerblue";
            }
        </script>
    </div>
</body>
</html>