Question

任何人都可以告诉我在单击锚标记时在索引页面中显示其他页面内容而不刷新的代码。所有页面都是HTML格式。第二页内容可以用幻灯片显示。

我希望HTML文件的代码不适用于PHP。

page1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="jquery-1.4.4.min.js"></script>
<script>
$(function(){
    $("#menu > a").click(function(e){
        //e.preventDefault(); 
        /*  
        if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
        if commented, html5 nonsupported browers will reload the page to the specified link. 
        */

        //get the link location that was clicked
        pageurl = $(this).attr("href");

        //to get the ajax content and display in div with id 'content'
        $.ajax({url:pageurl,success: function(data){
            $("#content").html(data);
        }});

        //to change the browser URL to 'pageurl'
        if(pageurl!=window.location){
            window.history.pushState({path:pageurl},"",pageurl);    
        }
        return false;  
    });
});

/* the below code is to override back button to get the ajax content without reload*/
$(window).bind("popstate", function() {
    $.ajax({url:location.pathname,success: function(data){
        $("#content").html(data);
    }});
});
</script>
</head>

<body>

<div id="menu">
    <a href="test2.html" id="ab">menu1</a> 
</div>

<div id="content"></div>
</body>
</html>

Secondpage.html

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Untitled Document</title>
    </head>
    <body>
      <div id="content">Second page</div>
     </body>
</html>

Answer 1

在您的主页面中

编写此代码

<script>

    $('#content_holder').load('secondpage.html');

</script>

Answer 2

使用jquery可以在html中使用来自另一个页面的内容。请在此处遵循以下代码：

创建两个任意文件index.html和Secondpage.html 在index.html下面粘贴代码： -
$（函数（）{ $（“＃target”）。click（function（）{ $（ “＃content_holder”）负载（ “Secondpage.html”）。 }）; }）;
1. 将以下代码放在body标签内，然后单击“我” 点击我

Answer 3

使用所谓的＆＃39;母版页＆＃39;。在那里定义内容的占位符：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Untitled Document</title>
     <script language="javascript" src="jquery-1.4.4.min.js"></script>
    </head>
    <body>
      <div id="menu">
          <a href="SecondPage.html" id="ab">menu1</a> 
      </div>

      <div id="content"><!-- Where your pages get injected --></div>
     </body>
</html>

然后是您的部分网页＆＃39;需要注入内容div。这意味着您的其他页面不需要是整个html页面，只需要注入那些部分：

SecondPage.html：

<div>
    <!-- your page 2 content, without the <html>, <head> and <body> tags -->
    lorem ipsum
</div>

脚本：

$(function(){
    $("#menu > a").click(function(e){
        e.preventDefault();

        //get the link location that was clicked
        pageurl = $(this).attr("href");

        //to get the ajax content and display in div with id 'content'
        $.ajax({url:pageurl,success: function(data){
            $("#content").html(data);
        }});

        // Or, even more simpler:
        // $("#content").load(pageurl);

        //to change the browser URL to 'pageurl'
        if(pageurl!=window.location){
            window.history.pushState({path:pageurl},"",pageurl);    
        }
        return false;  
    });
});

将其他页面内容显示到Index.html页面而不刷新

3 个答案: