Javascript 不要在每次加载页面时都重新加载导航栏
抱歉，如果这是一个太基本的问题，Angular+jQuery+HTML/CSS noob在这里 我有一个网站（www.blog.nishantkelkar.org）有一个导航栏。它有几个标签，其中一个是“关于我”。我希望当用户单击“关于我”选项卡时，页面不会重新加载。我认为这是低效的，为导航栏节省加载时间（在我的网站上一直保持不变）是一件好事 我使用Twitter的Bootstrap开源库在我的网页上设计样式，使用AngularJS控制动作（比如点击标签） 我的努力：我有一个控制器，它根据是否单击选项卡来设置ng class=“active”。但是，它加载该选项卡的整个href（整个html），而不仅仅是html中的差异Javascript 不要在每次加载页面时都重新加载导航栏,javascript,html,angularjs,twitter-bootstrap,Javascript,Html,Angularjs,Twitter Bootstrap,抱歉，如果这是一个太基本的问题，Angular+jQuery+HTML/CSS noob在这里 我有一个网站（www.blog.nishantkelkar.org）有一个导航栏。它有几个标签，其中一个是“关于我”。我希望当用户单击“关于我”选项卡时，页面不会重新加载。我认为这是低效的，为导航栏节省加载时间（在我的网站上一直保持不变）是一件好事 我使用Twitter的Bootstrap开源库在我的网页上设计样式，使用AngularJS控制动作（比如点击标签） 我的努力：我有一个控制器，它根据是否单
谢谢，非常感谢您的帮助
ng视图ng路线$routeProvider<body>
<header>
<nav class="navbar navbar-default" ng-controller="HeaderController">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Sample App</a>
</div>
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/')}"><a href="#/">Home</a></li>
<li ng-class="{ active: isActive('/about')}"><a href="#/about">About</a></li>
</ul>
</div>
</nav>
</header>
<ng-view></ng-view>
</body>
(function () {
var headerController = function ($scope, $location)
{
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
};
angular.module('sampleApp').controller('HeaderController',headerController);
}());
这是plunker
ng视图ng路线$routeProvider<body>
<header>
<nav class="navbar navbar-default" ng-controller="HeaderController">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Sample App</a>
</div>
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/')}"><a href="#/">Home</a></li>
<li ng-class="{ active: isActive('/about')}"><a href="#/about">About</a></li>
</ul>
</div>
</nav>
</header>
<ng-view></ng-view>
</body>
(function () {
var headerController = function ($scope, $location)
{
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
};
angular.module('sampleApp').controller('HeaderController',headerController);
}());
这是plunker您有一些选择，但是更好的选择是使用路由 Angular有一个内置的客户端路由（），还有一个第三方（更好，但更复杂） 这意味着您应该有几个单独的文件：mail.html和一些page.html 在main.html中，您应该添加标题。和
ng视图奖金（offtop）如果您只想要一个基于静态的博客（没有后端），但易于维护，您可以使用类似的功能。它是一个工具，可以在构建时从json生成静态页面。您可以为不同的平台（ruby、nodejs等）找到一些jekyl的替代方案。在这种情况下，您将能够在任何静态主机上托管您的页面。以下是如何将jekyl与gh页面一起使用：。您有一些选择，但更好的选择是使用路由 Angular有一个内置的客户端路由（），还有一个第三方（更好，但更复杂） 这意味着您应该有几个单独的文件：mail.html和一些page.html 在main.html中，您应该添加标题。和
ng视图奖金（offtop）如果您只想要一个基于静态的博客（没有后端），但易于维护，您可以使用类似的功能。它是一个工具，可以在构建时从json生成静态页面。您可以为不同的平台（ruby、nodejs等）找到一些jekyl的替代方案。在这种情况下，您将能够在任何静态主机上托管您的页面。这是如何将jekyl与gh页面一起使用：。建议使用JQuery显示和隐藏相关div，几乎类似于登录页或单页网站，或者您可以使用ajax在div中加载页面并保持菜单静态，但您尝试了什么？您可以使用它将动态内容注入页面上的容器中，不需要重新加载其他要保持静态的内容。@投否决票的人：我能知道为什么吗？我列出了我是一个noob，列出了我的努力，清楚地描述了我的问题。还需要什么？建议使用JQuery显示和隐藏相关div，几乎类似于登录页或单页网站，或者您可以使用ajax在div中加载页面并保持菜单静态，但您尝试了什么？您可以使用将动态内容注入页面上的容器，不需要重新加载其他要保持静态的内容。@投否决票的人：我能知道为什么吗？我列出了我是一个noob，列出了我的努力，清楚地描述了我的问题。还需要什么？非常感谢@Sachin的示例项目！我现在明白多了！=）很高兴知道这一点。请投票，如果我的答案有助于你请你的帖子包括代码（最好是文本）。外部链接不能替代文章中的代码。@ryanyyu我添加了一个plunker演示，而不是外部链接。Thanks@SachinKariyattin请在这里也包括劫掠者的代码。劫掠是有用的，但它们仍然不能替代您帖子中的实际代码。劫掠者仍然是外部链接。非常感谢@Sachin的示例项目！我现在明白多了！=）很高兴知道这一点。请投票，如果我的答案有助于你请你的帖子包括代码（公关）