JS封装方法实现菜单栏切换

最新推荐文章于 2021-10-07 21:38:34 发布

原创最新推荐文章于 2021-10-07 21:38:34 发布 · 1.8k 阅读

4 ·

CC 4.0 BY-SA版权

ＪａｖａＳｃｒｉｐｔ专栏收录该内容

105 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的简单导航菜单案例。通过点击菜单项，可以改变其样式，实现高亮显示当前选中项的效果。文章包含完整的HTML结构和必要的JavaScript代码，展示了如何为每个菜单项添加交互行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

HTMl部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="tools.js"></script>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #menu{
            width:627px;
            height: 50px;
            border:1px solid #cccccc;
            margin: 100px auto;
            overflow: hidden;
        }
        ul{
            width:627px;
            height:50px;
            list-style: none;
            margin-top: 0px;
        }
         li{
            width:100px;
            height:50px;
            float: left;
             margin: auto 2px;
            text-align: center;
            font:700 15px/40px "微软雅黑";
            background-color: pink;
            cursor: pointer;
        }
        #list li.current{
            background-color: burlywood;
        }
        #list li a{
            text-decoration: none;
        }
    </style>
  <!--  <script>
        window.function () {
            //点击A连接，让A连接对应的li标签添加类
            var ul=getEle("list");
            var liArr=ul.children;
            for(var i=0;i<liArr.length;i++){
               var a=getFirstNode(liArr[i])
                a.function () {
                    //排他思想
                    for(var j=0;j<liArr.length;j++){
                        liArr[j].className="";
                    }
                    this.parentNode.className="current";
                }
            }
        }
    </script>-->
    <script>
        window.function () {
            var ul=getEle("list");
            var liArr=ul.getElementsByTagName("a");
            for(var i=0;i<liArr.length;i++){
                liArr[i].function () {
                    this.parentNode.className="current";
                    var otherArr=getAllSilbingNode(this.parentNode);
                    for(var j=0;j<otherArr.length;j++){
                        otherArr[j].className="";
                    }
                }
            }
        }
    </script>
</head>
<body>
<div id="menu">
    <ul id="list">
        <li class="current"><a href="#">首页</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>
</body>
</html>

JS部分

/**
 * 2019/04/07
 */

function getEle(id) {
    return document.getElementById(id);
}

/**
 *给定元素查找他的第一个元素子节点并返回
 */
function  getFirstNode(ele) {
    var node=ele.firstElementChild||ele.firstChild;
    return node;
}

/**
 * 给定元素查找他的最后一个元素子节点并返回
 */
function  getLastNode(ele) {
    var node=ele.lastElementChild||ele.lastChild;
    return node;
}

/**
 * 给定元素查找他的下一个兄弟元素节点并返回
 * @param ele
 * @returns {Element|*|Node}
 */
function  getNextNode(ele) {
    return ele.nextElementSibling||ele.nextSibling;
}

/**
 * 给定元素查找他的上一个兄弟元素节点并返回
 * @param ele
 * @returns {Element|*|Node}
 */
function  getPrevNode(ele) {
    return ele.previousElementSibling||ele.previousSibling;
}

/**
 *给定元素和索引值查找指定索引值的兄弟元素节点并返回
 * @param ele 元素节点
 * @param index  索引值
 * @returns {*|HTMLElement}
 */
function  getEleOfindex(ele,index) {
    return ele.parentNode.children[index];
}

/**
 * 给定元素获取所有的兄弟节点（返回值是一个数组）
 * @param ele
 * @returns {Array}
 */
function  getAllSilbingNode(ele) {
    var newArr=[];
    var arr=ele.parentNode.children;
    for(var i=0;i<arr.length;i++){
        if(ele!=arr[i]){
            newArr.push(arr[i]);
        }
    }
    return newArr;
}