1

我正在尝试构建一个单页加载应用程序，即当用户单击链接时在单个页面中加载不同的页面。

例如，我有三个链接主页、新闻和联系方式，我怎样才能让它们全部加载到一个页面中，而无需转到 3 个不同的页面。

我怎样才能使用纯原生 Javascript 和 jquery 而不使用骨干或 Angular 只是纯 javascript 和无框架？

4

4 回答 4

1

jquery 加载功能应该会有所帮助。它将 html 从 url 加载到特定的 DOM 元素中。

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

你可以创建一个 div 并给它一个属性 id="main"。然后在链接联系人的 onclick 事件中，您可以调用 $("#main").load('contact.html'); 等等

于 2013-10-10T12:06:42.587 回答
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 回答
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();
        }
  }

在这里，您可以在一个页面中加载三个页面内容....

于 2013-10-11T11:33:16.790 回答
-2

您可以像这样使用 Ajax：



    $('#home').click(function(){
        $.get('home.html', function(data){
            document.write(data);
            document.close();
        });
    });

但它不能与跨域资源一起使用，你应该使用 CORS 或 iframe。

于 2013-10-10T12:42:53.697 回答