0

我创建了一个 jQuery 页面,并在一个 index.html 上的本地文件夹上使用 jQuery 处理多个页面,而无需费心。

现在我更多地在 CSS3 和 HTML5 上执行此操作,并使用 jQuery 1.7 来实现特性和功能。所以我对样式有更多的控制,而不是 100% 依赖 jQuery 布局。

例如:一个索引页面有四个 div 页面,而不是四个单独的 index.html

在 jQuery index.html 上,您有索引页面

  <div data-role="page" id="page" data-theme="a" >
  <?php include("php/header1.php"); ?>
      <!--End HEADER -->
      <div data-role="content">
          <ul data-role="listview">
              <li><a href="#page2">Page 2</a></li>
              <li><a href="#page3">Page 3</a></li>
              <li><a href="#page4">Page 4</a></li>
          </ul>
      </div>   
   <?php include("php/footer_front.php"); ?>
  </div>

  <!-- Start Page two--> 
  <div data-role="page" id="page2">
  <?php include("php/header2.php"); ?>
      <!--End HEADER --> 
      <!-- Start Collapsible Block widget-->
      <div data-role="content">
          Content here for page two
      </div>
      <!-- END Collapsible Block widget--> 
    <?php include("php/footer_front.php"); ?>
  </div>
  <!-- End Page two--> 

  <!-- Start Page Three--> 
  <div data-role="page" id="page3">
  <?php include("php/header3.php"); ?>
      <!--End HEADER --> 
      <!-- Start Collapsible Block widget-->
      <div data-role="content">
          Content here for page two
      </div>
      <!-- END Collapsible Block widget--> 
    <?php include("php/footer_front.php"); ?>
  </div>
  <!-- End Page Three--> 

  <!-- Start Page Four--> 
  <div data-role="page" id="page4">
  <?php include("php/header4.php"); ?>
      <!--End HEADER --> 
      <!-- Start Collapsible Block widget-->
      <div data-role="content">
          Content here for page two
      </div>
      <!-- END Collapsible Block widget--> 
    <?php include("php/footer_front.php"); ?>
  </div>
  <!-- End Page Three--> 

但是它不能像索引页本身那样工作,然后单击第二页以获取新的干净第二页?相反,我在一个浏览器窗口中看到索引页、第 2 页、第 3 页和第 4 页>

如何在一个浏览器上分隔页面而不是全部?

4

1 回答 1

0

我不确定我们是否在这里拥有所有信息,但是如果您想要使用 jQuery 不刷新的单独页面,那么您应该有一个占位符,用于放置页面的所有主要内容,然后仅在您的索引中有第一页内容的代码。当您单击第 2 页时,然后使用 jQuery 通过使用 .html() 删除主内容容器内的 html,并将其替换为新页面 2 的 html。最好的方法是使用 AJAX。如果你不知道那是什么,你应该做一个快速的谷歌搜索并阅读什么是 AJAX 以及如何使用它。

于 2012-10-03T19:50:58.313 回答