2013-03-13 124 views
0

如何在不同的div中显示内容格式的外部.html文件。例如,如果id为'li'= 1,则显示在'id = content1'中。如果id = 2,则显示在'id = content2'中。现在一切都在从外部.html文件显示ID = '内容'显示不同div的内容

这是我的js

var hash = window.location.hash.substr(1); 
var href = $('#nav 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) 
    }           
}); 

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

    var toLoad = $(this).attr('href')+' #content_from_external'; 
    $('#content').slideUp('normal',loadContent).delay(200); 
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); 
    function loadContent() { 
     $('#content').load(toLoad,showNewContent) 
    } 
    function showNewContent() { 
     $('#content').slideDown(1000); 

    } 
    return false; 

}); 

这是我的HTML

<ul id="nav" class="products"> 
         <li id="1"> 
          <a href="products/1.php"><img src="1.jpg"/></a> 
         </li> 
         <li class="under" id="2"> 
         <a href="products/2.php"><img src="2.jpg"/></a> 
         </li> 
         <li id="3">        
         <a href="products/3.php"><img src="3.jpg"/></a> 
         </li> 

         </li> 
    </ul> 
+0

欢迎SO。请接受和/或向上提供您认为有用的所有答案。 – isherwood 2013-03-13 16:59:46

回答

0
$('#nav li a').click(function(){ 
    var toLoad = $(this).attr('href')+' #content_from_external'; 
    var divId = '#content' + $(this).parents('li').attr('id'); 

    $(divId).slideUp('normal',loadContent).delay(200); 
    ... 
+0

它适合我。非常感谢你 – BahaS 2013-03-13 16:49:43

+0

不客气。请接受答案。 – isherwood 2013-03-13 16:59:18