Я не могу получить свой div для отображения данных из каждой ссылки. я думаю, что это может иметь отношение к внешнему файлу .js, который управляет функцией jQuery для слайдов. при щелчке по каждой ссылке окно соскальзывает и не отображает никаких новых данных. Также поле всегда показывает некоторые скрытые данные ...ajax не загружает данные правильно

Вот мой индексный файл. под этим будет внешний .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

ддд; обивка: 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; 



    }); 

});

источник

2014-01-04 wuno

для начала у вас есть ошибка в вашем CSS - # containers4 # containers5 - должна быть запятая между ними –

спасибо большое! одна проблема вниз lol ..., которая устраняет проблему с отображением данных, которое не предполагается. но единственная проблема в том, что когда я нажимаю ссылку, ничего не появляется ... – wuno

Ваш код выглядит [ужасно знакомым] (http://stackoverflow.com/questions/20873147/call-relevant-js-library-on-click-of -Каждый-меню-элементов, прежде чем-JQuery-нагрузки весело). Мне любопытно, есть ли общий источник. –

-1

Это ответ, чтобы загрузить данные все на одной странице в том же DIV, а затем скрыть , а затем отобразите его, когда ссылки нажимаются в nav.

<!-- 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}

источник

2014-01-05 05:34:25 wuno

ajax не загружает данные правильно

ддд; обивка: 10px; фон: # f6f6f6;}

ответ

Смежные вопросы