1

ユーザーがリンクをクリックすると、単一のページに異なるページをロードする、単一ページのロードアプリケーションを構築しようとしています。

たとえば、ホーム、ニュース、連絡先の 3 つのリンクがあるとします。3 つの異なるページに移動せずに、それらすべてを 1 つのページに読み込むにはどうすればよいでしょうか。

バックボーンやAngularだけを使用せずに、純粋なネイティブJavascriptとjqueryを使用して、純粋なJavaScriptとNo Framesを使用するにはどうすればよいですか?

4

4 に答える 4

1

jquery load 関数が役立つはずです。URL から特定の DOM 要素に html をロードします。

http://api.jquery.com/load/

単一の div を作成し、それにプロパティ id="main" を指定できます。次に、リンク連絡先の onclick イベントで、 $("#main").load('contact.html'); を呼び出すことができます。等

于 2013-10-10T12:06:42.587 に答える
0

ここに例があります。3 つの異なるダイビングを行い、「ホーム」、「ニュース」、「連絡先」などの 3 つの異なる ID を割り当てます。そして、ロードしたいコンテンツをそれらの div 内に配置します。

あなたのhtmlコードは以下のようになります。

  <div id="home">
     <h3>Home Page</h3>

    <p>Donec id elit non mi porta ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

    <p>Donec id elit non mi porta ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    onec id elit non mi porta ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
 </div>
 <div id="news">
     <h3>News Page</h3>

     <p>Donec id elit non mi porta ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

    <p>Donec id elit non mi porta ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
 </div>
 <div id="contact">
   <h3>Contact Page</h3>

    <p>Donec id elit non mi porta ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

    <p>Donec id elit non mi porta ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
 </div>

ナビゲーションでは以下のようになります

<ul>
    <li ><a onClick="showDiv(1);">Home</a></li>
    <li ><a onclick="showDiv(2);">News</a></li>
    <li ><a onclick="showDiv(3);">Contact</a></li>
  </ul>

この後、ヘッダー セクションで ShowDiv() メソッドを定義します。

function showDiv(pageid)
  {
    if(pageid== 1)
        {
        $("#home").show();
        $("#contact").hide();
        $("#news").hide();
        }
    if(pageid== 2)
        {
        $("#home").hide();
        $("#contact")
        $("#news").show();
        }
    if(pageid== 3)
        {
        $("#home").hide();
        $("#contact").show();
        $("#news").hide();
        }
  }

ほら、1ページに3ページ分のコンテンツを読み込めるし……。

于 2013-10-11T11:33:16.790 に答える
0

ねえ、あなたはjqueryでそれを求めています。

angularjsで解決策を提案します

私はそれがあなたのために働くことを願っています...

過去をコピーして「.html」として保存し、動作することを確認してください...

理解を深めるためにコメントを見てください。

<!DOCTYPE html>
<html>
<head>

<!-- you need to import this script for angularjs to work -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>

<!-- Adding the ng-app declaration to initialize AngularJS -->
<div id="main" ng-app>
    <!-- The navigation menu will get the value of the "active" variable as a class.
         The $event.preventDefault() stops the page from jumping when a link is     clicked. -->

<nav class="{{active}}" ng-click="$event.preventDefault()">

    <!-- When a link in the menu is clicked, we set the active variable -->

    <a href="#" class="home" ng-click="active='home'">Home</a>
    <a href="#" class="projects" ng-click="active='projects'">Projects</a>
    <a href="#" class="services" ng-click="active='services'">Services</a>
    <a href="#" class="contact" ng-click="active='contact'">Contact</a>
</nav>

<!-- ng-show will show an element if the value in the quotes is truthful,
     while ng-hide does the opposite. Because the active variable is not set
     initially, this will cause the first paragraph to be visible. -->

<p ng-hide="active">Please click a menu item</p>
<p ng-show="active">You chose <b>{{active}}</b></p>
</div>
</body>
</html>
于 2013-10-11T11:12:47.020 に答える