单击菜单的li将php页面加载到div中

时间:2012-10-15 04:23:28

标签: jquery dom tabs

我有一个导航栏,其中有像menu1 .... menu5这样的li项目,它们是由课程解决的。我有5个php文件命名为wrap1 ... wrap5。 我想在单击一个菜单栏li时在index.php的容器中加载这些文件。我使用了加载功能但是徒劳无功。

    $('.menu1').click(function(){
       $('#container').load('views/wrap2.php', function() {
       $('#container').fadeIn('slow') ;
   });
});

同样在index.php中,我包括所有必要的页面,如top.php,navbar.php,body.php& footer.php。这是一个问题????

编辑----

这是index.php

<?php
   require ('views/top.php') ;
   require ('views/quick.php') ;
   require ('views/navbar.php') ;
   echo '<div id="container">';
   echo '</div>';

   require ('views/footer.php') ;

?>

<div id="tabs">
<ul>
    <a href="views/wrap1.php"><li class="wrap1"> Home &nbsp&nbsp </li></a>
    <a href="views/wrap2.php"><li class="wrap2"> Packages</li></a>
    <a href="views/wrap3.php"><li class="wrap3"> Clients &nbsp </li></a>
    <a href="views/wrap4.php"><li class="wrap4">  Creations</li></a>
    <a href="views/wrap5.php"><li class="wrap5"> Reach Us &nbsp </li></a>
</ul>

</div>

1 个答案:

答案 0 :(得分:1)

使用此代码

$(document).ready(function(){
     $('#tabs li').click(function(){
     $('#container').load('views/'+$(this).attr("class")+'.php', function() {
        $('#container').fadeIn('slow') ;
       });
        return false;
    });
})

这是LIVE DEMO