写在前面
在使用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 += `
<li class='${className}'><a href='${elNode.path}'>${elNode.title}</a></li>
`
})
// 子元素html
childHTML = `
<ul>
${child}
</ul>
`
}
let className = ''
if(el.key === key) {
className = 'active'
}
// 父元素html
Parent += `
<li class='${className}'><a href='${el.path}'>${el.title}</a></li>
`
// 单个导航html
ParentHTML += `
${Parent}
${childHTML}
`
})
// 完整的html
menuHTML = `
<ul>
${ParentHTML}
</ul>
`
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
<div id="menu"></div>
这个是需要用到的dom
<script> $(() => { const key = 1 // 声明哪个是选中的状态 // 遍历导航栏 const nodes = menuEach(key) $('#menu').html(nodes) }) </script>
这个是 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>Document</title>
<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>Parent</div>
<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 是差不多的,按照上面的使用方式即可。