Question

我正在构建一个带导航功能的小型单页应用。页面位于div容器中，通过单击链接显示。页面changig的代码

        // show the given page, hide the rest
        function show(elementID) {
            history.pushState({ 
                plate_id: 1, 
                plate: elementID 
            }, null, elementID);
            goTo(elementID);
        }
        function goTo(elementID) {
            var ele = document.getElementById(elementID);
            if (!ele) {
                console.log("fail");
                return;
            }
            // get all pages, loop through them and hide them
            var pages = document.getElementsByClassName('page');

            for(var i = 0; i < pages.length; i++) {
                pages[i].style.display = 'none';
            }
            // then show the requested page
            ele.style.display = 'block';
        }
        window.onpopstate = function (event) {  
              var content = "";
              if(event.state) {
                content = event.state.plate;
              }
              if (content != '') goTo(content);
        }

链接看起来像

<a href="#" onclick="show('Page_1');" id="1">page 1</a>

和divs

<div id="Page_1" class="page" style="">

现在，当我使用链接时，网址会更改为... / Page_1＃或... / Page_2＃，页面会直接显示。现在，如果我使用后退按钮（自己或浏览器并不重要），我会发现一些我不理解的魔法。

例如

点击第一个链接 - ＆gt;转到../Page_1#（直接，各方面都很好）
点击secound链接 - ＆gt;去../Page_2#（直接，每个人都很好）
使用后退按钮 - ＆gt;转到../Page_2（没有＃，没有任何反应，但应该去Page_1 ??? !!）
再次使用后退按钮 - ＆gt;去../Page_1#（没事）
再次使用后退按钮 - ＆gt;转到../Page_1（第1页正在加载）

我不明白为什么第3步和第4步中的想法发生了！如果有人可以帮助我会很好

Answer 1

也许您希望自己的链接onclick为onclick="show('Page_1'); return false;"或onclick="return show('Page_1');"，并且您的展示功能可以return false;结束。

通过返回false，浏览器实际上并未遵循href="#"，而只是执行您的JavaScript。

Answer 2

我会用AngularJS做这件事，因为你不必关心history.js。它开箱即用。

请检查以下演示以帮助您入门。您也可以在jsFiddle here找到相同的代码。

在链接中，活动类未正确设置，但这并不难。在AngularJS和SO的一些例子中描述了这一点。见SO question

＆＃13;

'use strict';

var pageTemplate = "<div>{{page.title}}<div>";
var pageTitles = ['Page1', 'Page2'];

var app = angular.module('routingDemo', ['ngRoute']);

app.config(['$routeProvider', '$locationProvider',

function ($routeProvider, $locationProvider) {
    //$locationProvider.html5Mode(true);

    $routeProvider.
    when('/', {
        //templateUrl: 'partials/phone-list.html',
        template: "<div>main page</div>",
        //controller: 'MainCtrl'
    }).
    when('/pages/:pageId', {
        //templateUrl: 'partials/phone-detail.html',
        template: pageTemplate,
        controller: 'PagesCtrl'
    }).
    otherwise({
        redirectTo: '/'
    });
}]);

app.controller('PagesCtrl', ['$scope', '$routeParams', function ($scope, $routeParams) {
    $scope.page = {
        'title': pageTitles[$routeParams.pageId - 1]
    };
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.js"></script>
<script src="https://code.angularjs.org/1.2.6/angular-route.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div ng-app="routingDemo">
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header"> 
            <a class="navbar-brand" href="#/">Static pages demo</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#/pages/1">Page 1</a></li>
                <li><a href="#/pages/2">Page 2</a></li>
            </ul>
        </div>
    </nav>
    <div class="container" ng-view></div>
</div>

＆＃13;

history.pushState / back按钮/在单页面应用程序中导航

2 个答案: