0

I've created a jQuery page and dealt with multiple pages using and jQuery on local folder on one index.html without a bother.

Now I'm doing this on CSS3 and HTML5 more and use jQuery 1.7 for features and functions. So I've more control for style rather than depending 100% on jQuery layout.

For example: One index page with four div pages instead of four separate index.html

On jQuery index.html you have for index page 

  <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-->

But it doesn't work as it should with index page on its own and click page two for new clean page two? Instead I see index page, page 2 and page 3 and page 4 all on one browser window>

How do I separate the pages instead of all on one browser?

4

1 に答える 1

0

ここにすべての情報があるかどうかはわかりませんが、jQuery を使用して更新せずに個別のページが必要な場合は、ページのすべてのメイン コンテンツが移動する場所のプレース ホルダーが必要です。最初のページのコンテンツのコードがあります。ページ 2 をクリックすると、jQuery を使用して .html() を使用してメイン コンテンツ コンテナー内の html を削除し、それを新しいページ 2 の html に置き換えます。これを行う最善の方法は、AJAX を使用することです。それが何であるかわからない場合は、Google ですばやく検索して、AJAX とは何か、およびその使用方法を調べてください。

于 2012-10-03T19:50:58.313 に答える