鏈接到ajax div

Question

好吧，大家希望我可以有效地解釋這一點，所以在這裏。

我有一個無序的列表，其中每個列表項通過jquery在我的「服務」頁面上點擊將html頁面加載到div上。

基本上在頭版我有一對夫婦的鏈接，當點擊一個，我需要它去「服務」，並看到div中適當的HTML頁面。

這裏還挺如何代碼：

服務Page：

<ul id="service-nav"> 

      <li><a id="interlocking" href="#">Interlocking</a></li> 
      <li><a id="pool-backfill" href="#">Pool Backfill</a></li> 
      <li><a id="poured-concrete" href="#">Poured Concrete</a></li> 
      <li><a id="parging" href="#">Parging</a></li> 
      <li><a id="custom-land" href="#">Custom Landscaping</a></li> 
      <li><a id="snow-rem" href="#">Snow Removal</a></li> 
      <li><a id="excavation" href="#">Excavation</a></li></ul> 
     </ul> 

    <div id="right-area"> <!-- This is where we load the relevant html's --> 
    </div> 

頭版：

 <ul> 
      <li><a href="services.php?token=interlocking">Interlocking</a></li> 
      <li><a href="services.php?token=pool-backfill">Pool Backfill</a></li> 
      <li><a href="services.php?token=poured-concrete">Poured Concrete</a></li> 
     </ul> 

這裏是我的jQuery供大家參考：

<script type="text/javascript"> 
$(document).ready(function() { 

    $(function(){ 
     var token = window.location.toString().split("=")[1]; 

     $("#" + token).click(); 

     });​ 


    $('#interlocking').click(function() { 
     $('#right-area').load('http://romanstonedesigns.com/new/services/interlocking.php', function() { 
     }); 
    }); 

    $('#pool-backfill').click(function() { 
     $('#right-area').load('http://romanstonedesigns.com/new/services/pool-backfill.php', function() { 
     }); 
    }); 

    $('#poured-concrete').click(function() { 
     $('#right-area').load('http://romanstonedesigns.com/new/services/poured-concrete.php', function() { 
     }); 
    }); 

    $('#parging').click(function() { 
     $('#right-area').load('http://romanstonedesigns.com/new/services/parging.php', function() { 
     }); 
    }); 

    $('#custom-land').click(function() { 
     $('#right-area').load('http://romanstonedesigns.com/new/services/custom-landscaping.php', function() { 
     }); 
    }); 

    $('#excavation').click(function() { 
     $('#right-area').load('http://romanstonedesigns.com/new/services/excavation.php', function() { 
     }); 
    }); 

    $('#snow-rem').click(function() { 
     $('#right-area').load('http://romanstonedesigns.com/new/services/snow-removal.php', function() { 
     }); 
    }); 







}); 

</script> 

Answer 1

好吧，假設我們想要顯示互鎖頁面，所以你的頭版應該是這樣的：

1.

<ul> 
     <li><a href="services.php?token=Interlocking">Interlocking</a></li> 
    </ul> 

2.In您的服務頁面，jQuery代碼應該是：

<script type="text/javascript"> 


$(function(){ 




    $('#interlocking').click(function() { 
    $('#right-area').load('http://romanstonedesigns.com/new/services/interlocking.php', function() { 
    }); 
}); 

$('#pool-backfill').click(function() { 
    $('#right-area').load('http://romanstonedesigns.com/new/services/pool-backfill.php', function() { 
    }); 
}); 

$('#poured-concrete').click(function() { 
    $('#right-area').load('http://romanstonedesigns.com/new/services/poured-concrete.php', function() { 
    }); 
}); 

$('#parging').click(function() { 
    $('#right-area').load('http://romanstonedesigns.com/new/services/parging.php', function() { 
    }); 
}); 

$('#custom-land').click(function() { 
    $('#right-area').load('http://romanstonedesigns.com/new/services/custom-landscaping.php', function() { 
    }); 
}); 

$('#excavation').click(function() { 
    $('#right-area').load('http://romanstonedesigns.com/new/services/excavation.php', function() { 
    }); 
}); 

$('#snow-rem').click(function() { 
    $('#right-area').load('http://romanstonedesigns.com/new/services/snow-removal.php', function() { 
    }); 
}); 

    var token = window.location.toString().split("=")[1]; 
    $("#" + token).click(); 

    }); 

再見！