DDD;填充：10px的;背景：＃f6f6f6;}

Question

我无法让我的div显示每个链接的数据。我认为这可能与控制滑动jquery功能的外部.js文件有关。当单击每个链接时，框会向上滑动并且不显示任何新数据。此框也随时显示一些隐藏数据......

这是我的索引文件。在这下面将是控制幻灯片功能的外部.js文件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>David's Site</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
      <script src="js/jquery.zaccordion.js"></script>

      <!-- for the slide show -->
      <style type="text/css">
          /* Just some styles to set the page layout. */
          * {margin:0;padding:0;font-family:Arial, Verdana, sans-serif;}
          body {padding:20px;line-height:20px;font-size:12px;color:#000;}
          h1 {font-size:18px;margin:10px 0;line-height:1;}
          h2 {font-size:14px;margin:10px 0;line-height:1;}
          p {font-size:12px;margin:10px 0;}
          small {font-size:11px;margin:10px 0;color:#333;}
          a {font-size:12px;text-decoration:none;color:#f00;}
          p span {color:#00f;}
          #container {width:960px;margin:0 auto;padding-bottom:40px;}
          #examples {margin-top:60px;}
          pre {font-family:"Courier New", Courier, monospace;font-size:11px;margin:20px 0 100px 0;border:1px dashed

DDD;填充：10px的;背景：＃f6f6f6;}

          pre.html {margin:10px 0;}
          .clear {clear:both;}
      </style>


<style type="text/css">
@import url(css.css);
</style>
<script type="text/javascript" src="js.js"></script>


<!-- for loading the div with ajax -->
<script>
function showDiv(idInfo) {
  var sel = document.getElementById('divLinks').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
  document.getElementById('containers'+idInfo).display = 'block';
  return false;
}
</script>

<style type="text/css">
#containers1, #containers2, #containers3, #containers4 #containers5 {
  display:none;
  overflow:hidden;
}
</style>

</head>

<body>
<div id="top">
</div>


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

<div id="main">

<ul id="navigationMenu">
    <li>
      <a class="home" href="#" onclick="return showDiv('1')">
            <span>Home</span>
        </a>
    </li>

    <li>
      <a class="about" href="#" onclick="return showDiv('2')">
            <span>About</span>
        </a>
    </li>

    <li>
       <a class="services" href="#" onclick="return showDiv('3')">
            <span>Services</span>
         </a>
    </li>

    <li>
      <a class="portfolio" href="#" onclick="return showDiv('4')">
            <span>Portfolio</span>
        </a>
    </li>

    <li>
      <a class="contact" href="#" onclick="return showDiv('5')">
            <span>Contact us</span>
        </a>
    </li>
</ul>

</div>


<!-- The css for the main area is in css.css-->
<!-- The wrapper and the content div control the jquery slide up effect -->

<div id="wrapper">
  <div id="content">

  <!-- The 5 container content divs will display in the containers area -->           
       <div id="divLinks">
 <div id="containers1">Containers #1<p>Whole bunch of text 1</div>
 <div id="containers2">Containers #2<p>Whole bunch of text 2</div>
 <div id="containers3">Containers #3<p>Whole bunch of text 3</div>
 <div id="containers4">Containers #4<p>Whole bunch of text 4</div>
 <div id="containers5">Containers #5<p>Whole bunch of text 5</div>
 </div> 

  </div>
</div>

<script type="text/javascript">
window.onload = function() { showDiv('1'); }
</script>   
<!-- This is the slide show. Also the css for the slid show is in the head of this document -->

  <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() {

  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 loadContent() {
          $('#content').load(toLoad,'',showNewContent())
      }
      function showNewContent() {
          $('#content').show('normal',hideLoader());
      }

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



  });

});

Answer 1

这是将数据全部加载到同一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无法正确加载数据

DDD;填充：10px的;背景：＃f6f6f6;}

1 个答案: