手把手教你用js封装一个导航栏组件

最新推荐文章于 2024-05-22 13:34:30 发布

会左勾拳的螳螂

最新推荐文章于 2024-05-22 13:34:30 发布

阅读量2.6k

点赞数 3

分类专栏：组件封装文章标签： javascript html5 css

本文链接：https://blog.csdn.net/RuiHe_pan/article/details/110795366

版权

文章目录

前言
一、实现思路介绍
二、代码
总结

前言

本文介绍如何用js封装一个组件，这里以导航栏为例。
看这篇文章你需要有一定的js基础哦

一、实现思路介绍

我打算写个如图1-1 所示的导航栏；在前端用div作为组件的容器，并设置ID为‘nav’，在div上添加两个属性Avalue、Alink，分别用来传递a标签的文本值和href值，多个值之间用分号隔开，如图1-2；最后用js获取Avalue、Alink的值，将Avalue、Alink按分号进行切割存到数组中，然后用for循环拼接a标签和li标签，最后再用innerHTML方法将HTML标签写入，如图1-3。
在这里插入图片描述

图 1-1

在这里插入图片描述

图 1-2

在这里插入图片描述

图 1-3

二、代码

1.html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>前端组件封装测试</title>
		<script type="text/javascript" src="js/test.js"></script>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<!-- 导航栏 -->
		<div id="nav"<