jquery不跳转渲染页面简单超实用

泊言_

于 2019-01-26 11:41:46 发布

阅读量875

点赞数 1

CC 4.0 BY-SA版权

文章标签： jquery html php

本文链接：https://blog.youkuaiyun.com/Bel_Ami_n/article/details/86655612

jquery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用jQuery的load()方法动态加载指定区域的内容，而不影响页面其他部分。通过为不同分类添加点击事件，实现分类内容的切换，同时保持页面布局不变。此方法适用于创建响应快速、用户体验良好的网页应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery加载指点区域的页面，其他页面不改变


<div class="head bg-color-white flows" style="width: 85%" >
	<div class="items active" aid="1">分类1</div>   //页面默认显示分类1 active选中时的样式
	<div class="items " aid="2">分类2</div>
	<div class="items " aid="3">分类3</div>
</div>


<div class="contList">

	//jquery加载的内容会在这里显示
	
	<div class="list-line bg-color-f5"></div>
</div>


//load()中是需要展示的单独的内容页

<script type="text/javascript">
	$(function(){
		$(".items").click(function(){
			$(".items").removeClass('active');
			$(this).addClass('active');
			let aid = $(this).attr('aid');
			$(".contList").empty().load('../Contrname/item?code='+aid);
		})

		$(".contList").load('../Contrname/item?code=1');
	})	
</script>

jquery不跳转渲染页面 简单超实用

jquery不跳转渲染页面简单超实用