一个索引页面有四个div页面而不是四个单独的.html

时间:2012-10-03 15:18:47

标签: jquery html5 css3

我创建了一个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--> 

但是它不能像索引页面一样工作,单击第二页以获得新的第二页?相反,我在一个浏览器窗口&gt;

上看到索引页面,第2页和第3页以及第4页

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

1 个答案:

答案 0 :(得分:0)

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