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

最新推荐文章于 2024-07-16 10:00:50 发布

会左勾拳的螳螂

最新推荐文章于 2024-07-16 10:00:50 发布

阅读量2.7k

点赞数 3

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

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

版权

本文手把手教你如何使用JavaScript来封装一个导航栏组件。通过创建一个div容器，设置ID和属性Avalue、Alink，然后用js获取这些属性值，进行字符串分割，动态生成并插入a和li标签，实现组件的创建。最后提供了html、js和css的代码示例，鼓励读者尝试封装自己的组件库。

摘要由CSDN通过智能技术生成

前言

本文介绍如何用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