jquery load方法

最新推荐文章于 2023-04-10 16:58:36 发布

weixin_33966095

最新推荐文章于 2023-04-10 16:58:36 发布

阅读量102

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/1377006/blog/983093

本文介绍了一种利用jQuery的load()方法实现网页局部刷新的方法。通过点击左侧菜单加载不同的URL内容到右侧区域，适用于常见的管理系统布局。示例中详细展示了如何通过JavaScript控制菜单展开与折叠及内容加载。

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

2019独角兽企业重金招聘Python工程师标准>>>

load() 方法从服务器加载数据，并把返回的数据放置到指定的元素(dom)中。

一般的管理系统都是左侧点击，右侧显示的功能

就像下图所示功能我们就可以通过load方法实现

在a标签上加上 onclick事件点击的时候加载相应URL

<!doctype html>
<html lang="en-US">
  <head>
    <title>Responsive Bootstrap page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.4/css/bootstrap.css" rel="stylesheet">
	 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.4/js/bootstrap.js"></script>

    <style>
	  li{
	    height:30px;
		list-style:none;
	  }
	  a{
		text-decoration:none;
	  }
	  a:visited {
		 text-decoration:none; 
	  }
	  a:hover {
		 text-decoration:none; 
	  }
		 
	</style>

   </head>
	<body>
	<div class="container-fluid" style="height:50px;border-width:1px;border-style:solid;border-bottom:none">
    </div>
	<div class="container-fluid row" style="height:auto;">
	<div class="col-md-2" style="height:auto;border-width:1px;border-style:solid">
	   <ul>
	   <li><a hreif="javascript:;" onclick="loadPage(1,this)">菜单一</a>
	   </li>
	       <ul style="margin-left:-30px">
		   <li><a hreif="javascript:;" onclick="loadPage(0,this,'menu1.html')" >子菜单1</a></li>
	       <li><a hreif="javascript:;" onclick="loadPage(0,this,'menu2.html')">子菜单2</a></li>
		   </ul>
	   <li><a hreif="javascript:;" onclick="loadPage(1,this)" >菜单二</a>
	   </li>
	       <ul style="margin-left:-30px">
		   <li><a hreif="javascript:;" onclick="loadPage(0,this,'menu3.html')" >子菜单3</a></li>
           </ul>
	   <li><a hreif="javascript:;" onclick="loadPage(0,this,'menu4.html')">菜单三</a>
	   </li>
	
	   </ul>
	</div>
	<div id="main" class="col-md-10" style="height:auto;border-width:1px;border-style:solid">
	</div>
	</body>
	<script>
	function loadPage(hassubMenu,obj,url){
	    if(hassubMenu==1){//有子菜单
		   var subMenu = $(obj).parent().next();
		   if(!subMenu.is(':visible')){　　//如果subMenu是隐藏的则显示subMenu元素，否则隐藏
                 subMenu.show();　
           }else{
             subMenu.hide();
              }
		}else{
		  $("#main").load(url);
		}
		
	}

	</script>
	</html>

转载于:https://my.oschina.net/u/1377006/blog/983093