Question

当我单击我的链接以使用ajax在指定的div中加载新页面时，div上的jquery效果将触发并取消相同的信息。我有外部的.html文件，并设置了java脚本来加载#content div中的所有页面。

<ul id="navigationMenu">
    <li>
      <a class="home" href="index.html">
            <span>Home</span>
        </a>
    </li>

    <li>
      <a class="about" href="about.html">
            <span>About</span>
        </a>
    </li>

    <li>
       <a class="services" href="services.html">
            <span>Services</span>
         </a>
    </li>

    <li>
      <a class="portfolio" href="portfolio.html">
            <span>Portfolio</span>
        </a>
    </li>

    <li>
      <a class="contact" href="contact.html">
            <span>Contact us</span>
        </a>
    </li>
</ul>

</div>


$(document).ready(function() {

  var hash = window.location.hash.substr(1);
  var href = $('#navigationMenu li a').each(function(){
      var href = $(this).attr('href');
      if(hash==href.substr(0,href.length-5)){
          var toLoad = hash+'.html #content';
          $('#content').load(toLoad)
      }                                           
  });

  $('#navigationMenu li a').click(function(){

      var toLoad = $(this).attr('href')+' #content';
      $('#content').hide('fast',loadContent);
      $('#load').remove();
      $('#wrapper').append('<span id="load">LOADING...</span>');
      $('#load').fadeIn('normal');
      window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);

      $(function () {
    $("li", "#navigationMenu").click(function (event) {
        var url = $(this).attr("href"),
            hash = url.replace(".html", ""),
            content = $("#content");

        content.html("<p>Loading...</p>");

        $.ajax({
            url : url,
            dataType : "html",
            success : function(data){
                content.find("p").fadeout(function(){
                    content.find("p").html(data);
                    window.location.hash = hash;
                });
            }
        })
        event.preventDefault();
    });
});


      function loadContent() {
          $('#content').load(toLoad,'',showNewContent())
      }
      function showNewContent() {
          $('#content').show('normal',hideLoader());
      }

      function hideLoader() {
          $('#load').fadeOut('normal');
      }
      return false;



  });

});

Answer 1

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function do_the_click(brl)
    {
    alert(brl);

    var url = eval("brl");
    $( "#content" ).load(url, function() {
        alert( "Load was performed." );
});
    }
</script>
</head>
<body>
<ul id="navigationMenu">
    <li>
      <a class="home" href="#" onclick="do_the_click('index.html');">
            <span>Home</span>
        </a>
    </li>


</ul>

<div class="abc" id = "content">
        </div>


</body>
</html>

请创建名称为js的文件夹，其中包含与此sample.html并行的jquery库，并创建一个与之并行的示例index.html，希望这对您有用

Answer 2

以下是您可以使用的代码：

$(function () {
    $("a", "#navigationMenu").click(function (event) {
        var url = $(this).attr("href"),
            hash = url.replace(".html", ""),
            content = $("#content");

        content.html("<p>Loading...</p>");

        $.ajax({
            url : url,
            dataType : "html",
            success : function(data){
                content.find("p").fadeout(function(){
                    content.html(data);
                    window.location.hash = hash;
                });
            }
        })
        event.preventDefault();
    });
});

Answer 3

这是将数据全部加载到同一div中的一个页面，然后隐藏它，然后在导航中单击链接时显示它的答案。

<!-- The navigation css is in styles.css -->

<div id="main">

<ul id="navigationMenu">
    <li>
      <a class="home" href="#home">
            <span>Home</span>
        </a>
    </li>

    <li>
      <a class="about" href="#about">
            <span>About</span>
        </a>
    </li>

    <li>
       <a class="services" href="#services">
            <span>Services</span>
         </a>
    </li>

    <li>
      <a class="portfolio" href="#portfolio">
            <span>Portfolio</span>
        </a>
    </li>

    <li>
      <a class="contact" href="#contact">
            <span>Contact us</span>
        </a>
    </li>
</ul>

</div>

<!-- The wrapper and the content div control the jquery slide up effect -->
<div id="wrapper">
  <div id="content">
    <!-- The 5 pages content divs will display in this area -->   
    <!-- The actual content I want to switch in and out of the panel, this is hidden -->

 <div id="home" class="pages">
 <h1 style=color:#7fff00;>Welcome</h1>
 <p>hey this is cool</p>
 </div>

 <div id="about" class="pages">
 <h1 style=color:#6495ed;>My Qualifications</h1>
 <p>2 Whole bunch of text 2</div>

 <div id="services" class="pages">
 <h1 style=color:#ee7621;>Welcome</h1>
 <p>3 Whole bunch of text 3</div>

 <div id="portfolio" class="pages">
 <h1 style=color:#ffb90f;>Welcome</h1>
 <p>4 Whole bunch of text 4</div>

 <div id="contact" class="pages">
 <h1 style=color:#ff1493;>Welcome</h1>
 <p>5 Whole bunch of text 5</div>     

  </div>
</div> 



<!-- This is the slide show -->
<div id="container">
      <div id="examples">
          <ul id="example1">
              <li>
                  <img src="images/slide0.gif" width="600" height="270" alt="" />
              </li>
              <li>
                  <img src="images/slide1.gif" width="600" height="270" alt="" />
              </li>
              <li>
                  <img src="images/slide2.gif" width="600" height="270" alt="" />
              </li>
              <li>
                  <img src="images/slide3.gif" width="600" height="270" alt="" />
              </li>
              <li>
                  <img src="images/slide4.gif" width="600" height="270" alt="" />
              </li>
          </ul>

  <script type="text/javascript">
  $("#example1").zAccordion({
  timeout: 4000,
  slideWidth: 600,
  width: 960,
  height: 270
  });
  </script>

</div>
</div>

<div id="foot">
<a href="#top"><img src="img/upArrow.png" width="100" /></a>
</div>
</body>
</html>



$(document).ready(function () {
    $(".pages").hide();
    $("#navigationMenu a").click(function (e) {
        e.preventDefault();
        var item = this.href.split("#")[1];
        $(".pages:visible").slideUp(function () {
            $("#" + item).slideDown();
        });
    });
    $("#home").show();
});

.pages{
display: none}

如何使用ajax加载页面

3 个答案: