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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。