Question

我有4个文件。 file header.php

<br>Header Content from header.php</br></br>
<style>
#menu{font-size:20px;}
#content{font-size:30px;}
</style>
<script language="javascript" src="jquery-2.2.1.min.js"></script>
<script>
$(function(){
    $("a[rel='tab']").click(function(e){
        pageurl = $(this).attr('href');
        $.ajax({url:pageurl+'?rel=tab',success: function(data){
            $('#content').html(data);
        }});
        if(pageurl!=window.location){
            window.history.pushState({path:pageurl},'',pageurl);    
        }
        return false;  
    });
});
$(window).bind('popstate', function() {
    $.ajax({url:location.pathname+'?rel=tab',success: function(data){
        $('#content').html(data);
    }});
});
</script>
<div id='menu'>
    <a rel='tab' href='http://localhost/Test/ajax/menu1.php'>menu1</a> | 
    <a rel='tab' href='http://localhost/Test/ajax/menu2.php'>menu2</a> | 
    <a rel='tab' href='http://localhost/Test/ajax/menu3.php'>menu3</a>
</div>

file menu1.php

<?php 
if($_GET['rel']!='tab'){
    include 'header.php';
    echo "<div id='content'>";
}
?>
menu1 content in menu1.php
<?php 
if($_GET['rel']!='tab'){
    echo "</div>";
}?>

file menu2.php

<?php 
if($_GET['rel']!='tab'){
    include 'header.php';
    echo "<div id='content'>";
}
?>
menu2 content in menu2.php
<?php 
if($_GET['rel']!='tab'){
    echo "</div>";
}?>
file menu3.php
<?php 
if($_GET['rel']!='tab'){
    include 'header.php';
    echo "<div id='content'>";
}
?>
menu3 content in menu3.php
<a href="menu1.php">menu 1</a>
<?php 
if($_GET['rel']!='tab'){
    echo "</div>";
}?>

1次运行http://localhost/Test/ajax/menu1.php，链接menu1 | menu2 | menu3 - ＆gt;好但在http://localhost/Test/ajax/menu3.php 我点击＆＃34;菜单1＆＃34;在身体上，这不会加载ajax。

帮帮我。非常感谢你！

Answer 1

从

更改menu3.php中的内容

<a href="menu1.php">menu 1</a>

到

<a rel='tab' href='http://localhost/Test/ajax/menu1.php'>menu1</a>

更新您的js代码：

$("a[rel='tab']").click(function(e){
   e.preventDefault();
   var pageurl = $(this).attr('href');
   $('#content').load(pageurl);
   if(pageurl!=window.location){
      window.history.pushState({path:pageurl},'',pageurl);    
   }
   return false;
});

使用带有ajax的旧javascript befor加载页面

1 个答案: