jquery load方法

时间 2019-11-24

标签 jquery load 方法栏目 JQuery 繁體版

原文原文链接

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

通常的管理系统都是左侧点击，右侧显示的功能css

就像下图所示功能咱们就能够经过load方法实现html

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

<!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>