Question

首先，我道歉，因为这是我第一次尝试编写网站（或任何内容），所以这可能是一个愚蠢的问题。我有一个网页，当我点击导航栏中的链接时，我只想更新一个div。

<body>
    <div id="wrapper">
        <header id="header">
        </header>
        <section id="section1">
            <div>
            </div>
            <nav id="mainnav">
                <ul>
                    <li>
                        <a href="1.html"><b>1</b></a>
                    </li>
                    <li>
                        <a href="2.html"><b>2</b></a>
                    </li>
                    <li>
                        <a href="3.html"><b>3</b></a>
                    </li>
                </ul>
            </nav>
        </section>
        <section id="section2">
            <div id="mainwrap">
                <div id="main">
                </div>
            </div>
        </section>
    </div>
</body>

</html>

我知道，这是很多无用的东西，但你明白了。我正在尝试做的是当你点击1,2,3等时，只有div“mainwrap”的内容发生变化，URL也是如此（因此页面不会刷新，但URL会从www更改.website / 1.html到网站/ 2.html等，一个div的内容改变了）。我有1,2和3个不同的HTML文件，每个文件都有不同的“主”div，理想情况下会插入“mainwrap”。

我尝试过跟随https://css-tricks.com/rethinking-dynamic-page-replacing-content/等教程以及how to do partial page update with jquery等其他stackoverflow帖子。第二个看起来就像我想做的那样，但是当我尝试实现它时，它仍然不起作用。有一个简单的修复，我只是缺少，因为我不太了解编码？（另外，我正在使用Dreamweaver。我不知道这是否会有所不同。）

谢谢！

Answer 1

你是对的how to do partial page update with jquery正是你所需要的。我假设你是jquery的新手，所以这里有完整的标记http://jsfiddle.net/yrbvnayy/，可以完成你的工作！

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta http-equiv="edit-Type" edit="text/html; charset=utf-8" />

            <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

        </head>
    <body>
    <div id="wrapper">
<header id="header">
</header>
<section id="section1">
  <div>
  </div>
  <nav id="mainnav">
    <ul>
      <li>
        <a href="1.html"><b>1</b></a>
      </li>
      <li>
        <a href="2.html"><b>2</b></a>
      </li>
      <li>
        <a href="3.html"><b>3</b></a>
      </li>
    </ul>
  </nav>
</section>
<section id="section2">
  <div id="mainwrap">
    <div id="main">
    </div>
  </div>
</section>
</div>


        <script type="text/javascript">
        $("#mainnav li a").click(function(e) {
    // prevent from going to the page
    e.preventDefault();

    // get the href
    var href = $(this).attr("href");
    $("#main").load(href, function() {
        // do something after content has been loaded
    });
});
        </script>

    </body>
</html>

Answer 2

我使用jquery ajax的相同参考来解释答案。 How to do partial page update with jQuery?

在您的情况下，我将以上用法用作

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$('#mainnav a').click(function(e){
 //either use e.preventDefault() to stop the default event or return false
   var loc=$(this).attr('href');
   $('#mainwrap').load(loc);
   //This should load the html content to your div
})
});
</script>

修改

如果您只想要指向的HTML页面的div，则可以选择其他方法。

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(document).ready(function(){ $('#mainnav a').click(function(e){ // either use e.preventDefault() to stop the default event or return false e.preventDefault(); var loc = $(this).attr('href'); $.ajax({ url: loc, type: 'GET', // can be GET or POST depending on your requirement success: function(data, textstatus, xhr) { var div = $(data).find('#main'); $('#mainwrap').html(div); }, error: function(xhr, status, error) { alert('Error - ' + xhr.responseText); } }); // This should load the html content to your div }) }); </script>

您可以查看更多与ajax相关的文档http://api.jquery.com/jquery.ajax/

Answer 3

你引用的例子是使用php，它可以做你想要的。

导航

3 个答案: