Question

我正在尝试仅更改主要/内容＆＃39;我的网页的一部分，并保留标题，导航栏和页脚“静态”，因为它们在每个页面都是通用的。

这在第一次导航按钮点击时效果很好。但第二个没有响应（虽然$ currentPage的更改在打印到控制台时反映出来）。经过多次点击后，将发生辅助div-content-change，但不会发生与单击最后一个按钮相对应的更改。

我真的希望能够得到这个，因为它似乎应该是非常可行的。

这是我的索引：

  <!DOCTYPE html>
  <head>
     <title>NoteVote</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
     <link rel="stylesheet" href="./NV_home.css">
     <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
     <script src="./scripts/navScript.js"></script>
     <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
  </head>
  <body>

  <!-- COURSES page -->
  <div data-role="page" id="noteVote">
     <div data-role="header" align="middle" class="header">
        <img src="images/banner_post_it.png" align="middle" alt="Banner Image" height="100" width="250"/>
        <!-- This is the Navbar -->
        <div data-role="navbar" data-grid="c" id="navBar">
           <ul>
              <li><a class="ui-btn" id="coursesButton">Courses</a></li>
              <li><a class="ui-btn" id="searchButton">Search</a></li>
              <li><a class="ui-btn" id="submitButton">Submit</a></li>
              <li><a class="ui-btn" id="accountButton">Account</a></li>
           </ul>
        </div>
     </div>

     <!-- This is the MAIN section -->
     <div data-role="content" class="ui-content" id="coursesContent">
           <h1>Courses</h1>
     </div>

     <!-- FOOTER -->
     <div data-role="footer" class="footer">
        You are not logged in!
     </div>
  </div>
  <!-- /COURSES -->

  <!-- SEARCH -->
  <div data-role="page" id="search">

     <!-- This is the MAIN section -->
     <div data-role="content" class="ui-content" id="searchContent">
        <h1>Search Section</h1>
     </div>

  </div> <!-- /search -->

  <!-- SUBMIT -->
  <div data-role="page" id="submit">

     <div data-role="content" class="ui-content" id="submitContent">
        <h1>Submiiiiit</h1>
     </div>

  </div> <!-- /submit -->

  <!-- ACCOUNT -->
  <div data-role="page" id="account">

     <div data-role="content" class="ui-content" id="accountContent">
        <h1>Accoooount</h1>
     </div>

  </div>
  <!-- /Account -->
  </body>
  </html>

我的剧本：

  $(document).ready(function()
  {
     $currentPage = "#coursesContent";   // Holds the current page.

     // Function for Courses button
     $(document).on("click","#coursesButton",function(e)
     {
        e.preventDefault();

        $($currentPage).html($('#coursesContent').html());

        $currentPage = "#coursesContent";
        console.log($currentPage);
     });

     // Function for the Search Button in nav bar.
     $(document).on("click","#searchButton",function(e)
     {
       e.preventDefault();

       $($currentPage).html($('#searchContent').html());

       //Sets  current page to Search Content (search page)
       $currentPage = "#searchContent";

       console.log($currentPage);
     });

     // Function for Submit button.
     $(document).on("click","#submitButton",function(e)
     {
        e.preventDefault();

        $($currentPage).html($('#submitContent').html());

        $currentPage = "#submitContent";

        console.log($currentPage);
     });

     // Function for Account button
     $(document).on("click","#accountButton",function(e)
     {
        e.preventDefault();

        $($currentPage).html($('#accountContent').html());

        $currentPage = "#accountContent";
        console.log($currentPage);
     });

  });

有没有什么方法可以调用脚本在每次点击按钮时重新加载？似乎变量正在发生变化，但内容刷新并未发生。

非常感谢任何帮助。

此外，非常欢迎任何其他实施此方法的建议。

干杯！

Answer 1

我经常使用的简单的单页导航脚本如下所示：

$(document).ready(function() {
    $("#coursesButton").on("click", function(e) {
        e.preventDefault();
        $("#mainContent").load("/snippets/courses.html");
    }

    $("#accountButton").on("click", function(e) {
    //... etc.
}

使用与菜单项一样多的块。

基本上，重复，然后/snippets/courses.html更改为/snippets/account.html等。将您的额外HTML文件保存在代码段文件夹中（或者您想要安排它）。

常量是<div>，ID为#mainContent。这样，您只需交换/移出该主DIV的内容，而不必在不使用时将其他元素保留在文档中。

使用$(this)并将代码段文件名与按钮的ID匹配可能有更优雅的方法，但上述方法的工作方式应该比您目前正在做的更容易理解

使用JS变量在多个页面上更改特定的<div>内容（JQuery Mobile）（第二次按钮单击不执行任何操作）</div>

1 个答案: