学习随笔——1.前端公共导航实现（load方法）

最新推荐文章于 2024-06-15 18:07:44 发布

qq_32841367

最新推荐文章于 2024-06-15 18:07:44 发布

阅读量544

点赞数

分类专栏：学习随笔文章标签：公共导航 load 前端

本文链接：https://blog.csdn.net/qq_32841367/article/details/99422156

版权

学习随笔专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一次写博客，就当学习笔记吧。

之前都是php后台同事处理公共的html代码，我记得是用include引入来着。
现在需要前端来处理这个问题，怎么办呢？不想用iframe，于是问度娘，发现有很多解决办法，这里使用一种我觉得很简单的方法，那就是load了。

1.目录结构
在这里插入图片描述
2.公共代码提取，即header.html
注意：只要有用的部分即可，不需要完整的html页面结构。就是说，head，meta等等都不用。路径可以是相对路径也可以是绝对路径。

<div class="header">
	<ul class="header_ul">
		<li class="header_item"><a href="http://192.168.7.229/smy/learn/js_load_header/js_load_header/index.html">菜单一</a></li>
		<li class="header_item"><a href="http://192.168.7.229/smy/learn/js_load_header/js_load_header/index2.html">菜单二</a></li>
		<li class="header_item"><a href="http://192.168.7.229/smy/learn/js_load_header/js_load_header/index3.html">菜单三</a></li>
	</ul>
</div>

3.在需要的页面使用，例如：
index.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>js load html 学习</title>
		<link rel="stylesheet" href="http://192.168.7.229/smy/learn/js_load_header/js_load_header/css/reset.css" />
		<link rel="stylesheet" href="http://192.168.7.229/smy/learn/js_load_header/js_load_header/css/common.css" />
		<script type="text/javascript" src="http://192.168.7.229/smy/learn/js_load_header/js_load_header/js/jquery-1.7.2.min.js" ></script>
		<script type="text/javascript" src="http://192.168.7.229/smy/learn/js_load_header/js_load_header/js/common.js" ></script>
	</head>
	<body>
		<div class="template_header" cur="0"></div>
	</body>
</html>

index2.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>js load html 学习</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<link rel="stylesheet" href="http://192.168.7.229/smy/learn/js_load_header/js_load_header/css/reset.css" />
		<link rel="stylesheet" href="http://192.168.7.229/smy/learn/js_load_header/js_load_header/css/common.css" />
		<script type="text/javascript" src="http://192.168.7.229/smy/learn/js_load_header/js_load_header/js/jquery-1.7.2.min.js" ></script>
		<script type="text/javascript" src="http://192.168.7.229/smy/learn/js_load_header/js_load_header/js/common.js" ></script>
	</head>
	<body>
		<div class="template_header" cur="1"></div>
	</body>
</html>

其中：“cur”属性是我自定义的，用来处理选中状态

4.划重点——common.js中的部分

function curChange(){
    // 获取当前页面
    var active_idx=$(".template_header").attr("cur");
    $(".header_item").eq(active_idx).addClass("active").siblings().removeClass("active");
}
$(function(){
	$(".template_header").load('http://192.168.7.229/smy/learn/js_load_header/js_load_header/common_html/header.html',function(){
		curChange();
	});
})

5.实现效果
在这里插入图片描述

6.不重要的css

.header{
	width: 100%;
	height: 80px;
	background: #333;
}
.header_ul{
	width: 1200px;
	margin: 0 auto;
	display: flex;	
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
.header_item{

	width: 100px;
	height: 80px;
	line-height: 80px;
	font-size: 14px;
	color: #fff;
	text-align: center;
	list-style: none;
	cursor: pointer;
}
.header_item a{
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: #fff;
}
.header_item:hover{
	background: #999;
}
.header_item:hover a{
	color: #333;
}
.header_item.active{
	background: #fff;
}
.header_item.active a{
	color: #333;
}

好了，这样就实现了。如果大家又发现什么问题欢迎指正。

qq_32841367

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
学习随笔——1.前端公共导航实现（load方法）

第一次写博客，就当学习笔记吧。之前都是php后台同事处理公共的html代码，我记得是用include引入来着。现在需要前端来处理这个问题，怎么办呢？不想用iframe，于是问度娘，发现有很多解决办法，这里使用一种我觉得很简单的方法，那就是load了。1.目录结构2.公共代码提取，即header.html注意：只要有用的部分即可，不需要完整的html页面结构。就是说，head，meta等...
复制链接

扫一扫