是否可以为我加载某个div It It
<div class="the-container">Demo...</div>
如果单击页面上的任何链接,我希望整个页面保持不变,除了使用JavaScript的页面部分,它应该在滑动过渡中发生。我曾尝试在Google上搜索它,但它并没有帮助我,因为我在JavaScript方面很差。请帮忙,谢谢!
答案 0 :(得分:2)
最常见也是最好的方法是使用Ajax。但是我会用不同的解决方案回答。它可能不是最好但它有效,而这个答案不需要服务器。这将使用jQuery和一个名为Cycle by Malsup的插件。您可以使用包含内容的div来代替在插件上使用图像。然后使用您的链接作为寻呼机。
这是一个最小风格的小提琴:http://jsfiddle.net/gdd49xdf/
<强> HTML 强>
<div class="container">
<div class="contentbox">About Content</div>
<div class="contentbox">Portfolio Content</div>
<div class="contentbox">Services Content</div>
<div class="contentbox">FAQ Content</div>
<div class="contentbox">Contact Page</div>
</div>
<!-- Menu -->
<div class="menu">
<ul id="menu2">
<li><a class="firstli" id="about" href="about">about</a></li>
<li><a class="firstli" id="portfolio" href="portfolio">portfolio</a></li>
<li><a class="firstli" id="services" href="services">services</a></li>
<li><a class="firstli" id="faq" href="faq">faq</a></li>
<li><a class="firstli" id="contact" href="contact">contact</a></li>
</ul>
</div>
jQuery循环脚本
$(document).ready(function () {
$('.container').cycle({
fx: 'fade',
speed: 1000,
delay: 5000,
timeout: 0,
//sync: 0,
containerResize: 0,
slideResize: 0,
pager: '#menu2',
pagerAnchorBuilder: function(idx, slide) {
// return selector string for existing anchor
return '#menu2 li:eq(' + idx + ') a';
}
});
});
CSS样式和循环效果取决于你。
答案 1 :(得分:0)
<html>
<head>
</head>
</body>
<a href="file1.html">File 1</a> |
<a href="file2.html">File 2</a>
<br><br>
<div class="the-container">Contain will be load here!</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
$('a').click(function(e){
e.preventDefault();
$('.the-container').text('Please wait...');
$('.the-container').load($(this).attr('href'));
})
})
</script>
load()方法所需的服务器。