我需要将网页加载到div中

时间:2019-06-22 17:39:53

标签: jquery html css ajax

我想从页面右侧的另一页面发布照片库。

在页面顶部是我的菜单,然后在左侧是页面的链接。

当用户单击左侧链接时,我希望图库加载到右侧潜水标签中。

当我单击另一个链接时,我可以使其加载一次,然后再加载一次。我必须刷新页面才能使其再次工作。以下是我一直在玩并且没有运气的代码。

我可以将其加载到新页面中,然后返回并单击另一个刷新页面的链接,但是我不想这样做。我只想在某个部分的同一页上显示。有任何想法或解决方法吗?

<html>
<head>
<title>Gratiot County, Michigan Genealogy Trails</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href='http://fonts.googleapis.com/css?        family=Roboto:400,100,300,700,500,900' rel='stylesheet' type='text/css'>
<script     src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">        </script>
<script src="http://code.jquery.com/jquery-1.4.min.js"     type="text/javascript"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-panels.min.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#AlmaGallery").click(function(){
$('#result').load('AlmaGallery.html');
 }); 

$("#IthacaGallery").click(function(){
$('#result').load('IthacaGallery.html');
});
$("#StLouisGallery").click(function(){
$('#result').load('StLouisGallery.html');
});
$("#AshleyGallery").click(function(){
$('#result').load('AshleyGallery.html');
 });
$("#BreckenridgeGallery").click(function(){
$('#result').load('BreckenridgeGallery.html');

});
});
</script>
<noscript>
<link rel="stylesheet" href="css/skel-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
</head>

<body class="homepage">
<!-- Header -->

<div class="container"> 


<!-- Header --> 
<!-- Main -->
<div id="main">
<div class="container">
<div class="row">

<!-- Sidebar -->
<div id="sidebar" class="4u">
<section>
<header>
<h2>Cities and Villages</h2>
</header>
<div class="row">
<section class="6u">
<ul class="default">
<li><a id=AlmaGallery href="#">Alma</a></li>
<li><a id=IthacaGallery href="#">Ithaca</a></li>
<li><a id=StLouisGallery href="#">St. Louis</a></li>
</ul>
</section>
<section class="6u">
<ul class="default">
<li><a id="AshleyGallery" href="#">Ashley</a></li>
<li><a id="BreckenridgeGallery" href="#">Breckenridge</a></li>
<li><a id="PerrintonGallery" href="#">Perrinton</a></li></ul>
</section>
</div>
</section>

</section>
</div>

<!-- Content -->
<div id="content" class="8u skel-cell-important">
<section>
<header>
<h2>Photo Gallery</h2>
</header>
<div id="result" style="clear:both;">
</section>
</div>
</div>
</div>
</div>

</body>

0 个答案:

没有答案