使用jquery中的load方法加载界面

最新推荐文章于 2024-05-15 23:42:50 发布

WLY_Unity_Unreal

最新推荐文章于 2024-05-15 23:42:50 发布

阅读量4.4k

点赞数 2

分类专栏： jquery

本文链接：https://blog.csdn.net/Wenliuyong/article/details/93617666

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

当我们需要在界面的某一个模块中显示另一个界面的某个模块时,可以jquery中的load方法实现界面的重用.下面的案例:当点击导航栏中不同的选项时,下方界面展示对应的内容:

首先写一个content.html,里面是各个选项所对应的模板:

<!DOCTYPE html>
<html>
<head>
	<title>content</title>
	<meta charset="utf-8">
</head>
<body>
	<div id="userCenter">
		我是个人中心界面
	</div>
	<div id="rechargeCenter">
		我是充值中心界面
	</div>
	<div id="shop">
		我是商城界面
	</div>
</body>
</html>

然后在主界面中适时的加载:

<!DOCTYPE html>
<html>
<head>
	<title>jquery中的load函数</title>
	<style type="text/css">
		nav {
			width: 100%;
			height: 40px;
			box-shadow: 0 2px 4px 0 rgba(0,0,0,.05);
			background-color: #fff;
			line-height: 40px;
			text-align: center;
		}
		nav>span {
			display: inline-block;
			font-size: 15px;
			padding: 0 5px;
		}
		nav>span:hover {
			color: #f00;
			cursor: pointer;
		}
		nav>span.select {
			color: #f00;
		}
		body {
			background-color: #f5f6f7;
		}
		.content>div {
			background-color: #f5f6f7;
			color: #000;
			width: 100%;
			height: 200px;
			line-height: 200px;
			text-align: center;
			font-size: 20px;
		}
	</style>
	<script
	  src="http://code.jquery.com/jquery-3.4.1.js"
	  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
	  crossorigin="anonymous"></script>
</head>
<body>
	<nav>
		<span id="person">个人中心</span>
		<span id="recharge">充值中心</span>
		<span id="shop">商城</span>
	</nav>
	<div class="content">
		<div>什么都么得</div>
	</div>

	<script type="text/javascript">
		$(function ($) {
			//获取到导航栏中按钮的DOM对象
			var btnArr = $('nav').children ();
			//把DOM对象转为jquery对象
			for (var i = 0; i < btnArr.length; i++) {
				btnArr[i] = $(btnArr[i]);
			}
			//当点击按钮时,设置按钮样式为已选中
			function setTitleSelect (id) {
				for (var i = 0; i < btnArr.length; i++) {
					if (btnArr[i].attr ('id') === id && !btnArr[i].hasClass ('select')) {
						btnArr[i].addClass ('select');
					} else if (btnArr[i].attr ('id') !== id) {
						btnArr[i].removeClass ();
					}
				}
			}
			//当点击按钮时,向content对象中加载界面
			function appendNodesToContent (path) {
				$('.content').load (path);
			}
			//为三个按钮添加点击事件:1.加载对应界面 2.设置按钮样式为已选中
			$('#person').bind ('click', function () {
				appendNodesToContent ('./content.html #userCenter');
				setTitleSelect ('person');
			});
			
			$('#recharge').bind ('click', function () {
				appendNodesToContent ('./content.html #rechargeCenter');
				setTitleSelect ('recharge');
			});

			$('#shop').bind ('click', function () {
				appendNodesToContent ('./content.html #shop');
				setTitleSelect ('shop');
			});
		});
	</script>
</body>
</html>

如上所示,jquery对象的load方法接受一个参数,为需要加载的文件路径和节点的选择器,中间用空格隔开,选择器可以不加,不加的话会把文件中所有内容拷贝过来;否则只拷贝选择器对应的节点.这个功能还是相当好用的,效果如下:

WLY_Unity_Unreal

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用jquery中的load方法加载界面

当我们需要在界面的某一个模块中显示另一个界面的某个模块时,可以jquery中的load方法实现界面的重用.下面的案例:当点击导航栏中不同的选项时,下方界面展示对应的内容:首先写一个content.html,里面是各个选项所对应的模板:<!DOCTYPE html><html><head> <title>content</ti...
复制链接

扫一扫

专栏目录