jquery 动态生成导航栏

写在前面

在使用jquery开发网页的时候,做不到像vue一样引入组件,但是我们的导航栏,还是不能每个页面都写的。要不然当需要修改小部分内容的时候,还得需要一个个文件去改,这样的代码也太不好维护了。所以我们需要使用js来生成导航栏。这里写的比较简单,入门级的,提供大致思路,可以根据你们的使用场景来进行修改。

前期准备

  • jQuery
    只需要这个,版本还是没有要求的

实现的 js 方法

utils.js

/**
 * 类名 active 当前导航栏选中
 * @param Number 传入需要高亮的节点,只能是一个
 * @return String
*/
 function menuEach(key) {
    let menuHTML = ''
    let ParentHTML = ''         // 父元素完整html
    menus.forEach((el,index) => {
        let Parent = ''
        
        let childHTML = ''      // 子元素完整html
        // 判断是否有子元素
        if(("childNodes" in el)) {
            
            let child = ''
            // 遍历子元素
            el.childNodes.forEach(elNode => {
                let className = ''
                if(elNode.key === key) {
                    className = 'active'
                }
                child += `
                    
  • ${elNode.title}
  • `
    }) // 子元素html childHTML = `
      ${child}
    `
    } let className = '' if(el.key === key) { className = 'active' } // 父元素html Parent += `
  • ${el.title}
  • `
    // 单个导航html ParentHTML += ` ${Parent} ${childHTML} ` }) // 完整的html menuHTML = `
      ${ParentHTML}
    `
    return menuHTML }

    声明导航栏数据的js

    menu.js

    // key 不能相同
    const menus = [
        {
            title: '首页',  // 标题
            path: 'index.html',       // 跳转的路径
            key: 1,         // key 唯一值 不能重复
            childNodes: [   // 子元素
                {
                    title: '点我跳转',
                    path: 'child.html',
                    key: 4,
                }
            ]
        },
        {
            title: '列表',
            path: '',
            key: 2,
            childNodes: [
                {
                    title: '分类',
                    path: '',
                    key: 5,
                }
            ]
        },
        {
            title: '案列',
            path: '',
            key: 3,
        }
    ]
    

    我们的html

    index.html

    这个是需要用到的dom

    这个是 js 这些都写在html即可

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
        <script src="./js/jquery-3.6.0.min.js">script>
        <script src="./js/menu.js">script>
        <script src="./js/utils.js">script>
    head>
    <body>
        <div id="menu">div>
        <div>Parentdiv>
    
        <script>
            $(() => {
                const key = 1   // 声明哪个是选中的状态
                 // 遍历导航栏
                const nodes = menuEach(key)
                $('#menu').html(nodes)
            })
        script>
    body>
    html>
    

    目录结构

    • js
      • jquery-3.6.0.min.js
      • menu.js
      • utils.js
    • child.html
    • index.html

    这里 child.html 的代码没有展示,但是实际上和 index.html 是差不多的,按照上面的使用方式即可。

    你可能感兴趣的:(web,jquery,javascript,前端)