Question

我想将网站的所有页面加载到放置菜单的单个页面中 - 菜单永远不会重新加载。

我正在使用普通的ul / li设置，但不是加载将替换整个页面的页面，我正在寻找一个将页面加载到现有“母版页”的解决方案 - 当点击另一个链接时og替换它< / p>

有没有办法用php或Jquery完成这个？

我尝试过这个php解决方案，但是加载页面的内容没有显示：

<?php  
$p = $_GET['page'];

switch($page)
{
    case "item_1":
        $page = "includes/item_1.php";
    break;

    case "item_2":
        $page = "includes/item_2.php";
    break;
}
?>  

   <ul class="sub">      
      <li><a href="#.php"> items </a>
          <ul class="ul_third">
              <li><a href="#.php?p=item_1.php"> item 1 </a></li>
              <li><a href="#.php?p=item_2.php"> item 2 </a></li>
          </ul> 
      </li>
   </ul>

Answer 1

尝试这种方法..这将加载所有页面div具有id #content

<ul id="nav">
    <li><a href="index.php">welcome</a></li>
    <li><a href="about.php">about</a></li>
    <li><a href="portfolio.php">portfolio</a></li>

</ul>
<div id="content">
    //Here load the pages
</div>

脚本

$(document).ready(function() {

    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-4)){
            var toLoad = hash+'.php #content';
            $('#content').load(toLoad)
        }                                           
    });

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

        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#load').remove();
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#content').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });

});

从li加载和交换页面而不重新加载菜单

1 个答案: