Question

是否可以为我加载某个div It It

<div class="the-container">Demo...</div>

如果单击页面上的任何链接，我希望整个页面保持不变，除了使用JavaScript的页面部分，它应该在滑动过渡中发生。我曾尝试在Google上搜索它，但它并没有帮助我，因为我在JavaScript方面很差。请帮忙，谢谢！

Answer 1

最常见也是最好的方法是使用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样式和循环效果取决于你。

Answer 2

<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（）方法所需的服务器。

如何使用JavaScript加载网站只加载某个div（类）以节省加载时间

2 个答案: