Question

所以我正在尝试使用哈希来从页面到页面进行动画处理。加载（home）的第一页完美地淡入和淡出，但我试图访问的页面，测试（查看哈希的东西），根本不会动画/加载。这是为什么？

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
    <title>Jack Cook</title>
    <style>
    #navbar ul {
        list-style-type: none;
        display: block;
        text-align: center;
    }

    #navbar ul li {
        display: inline-block;
    }

    #navbar img {
        width: 64px;
        height: 64px;
        padding: 0 10px 0 10px;
    }

    #navbar a img:hover {
        opacity: 0.4;
    }
    </style>

    <script type="text/javascript">
    $(document).ready(function () {
      pages = {
        "home": ["Home", "This is my homepage!", "<p>Homepage</p>"],
        "test": ["Test", "This is a testing page", "<p>Testing</p>"]
      };

      page = window.location.hash != "" ? window.location.hash.substr(3) : "home";
      update(page);

      $(document).on("click", "a", function() {
        if ($(this).attr("href").substr(0, 4) != "http") {
          event.preventDefault();
          window.location.hash = "!/" + $(this).attr("href");
        }
      });

      $(window).on("hashchange", function () {
        $("body").fadeOut(1000, function () {
          update(window.location.hash);
        });
      });
    });

    function update(page) {
      $("body").css("display", "none");
      $("#content").html(pages[page][2]);
      $("body").fadeIn(2000);
    }
    </script>
  </head>
  <body>
    <div id="navbar">
      <ul>
        <li><a href="test"><img src="http://cdn4.iconfinder.com/data/icons/devine_icons/128/PNG/Folder%20and%20Places/Home.png" /></a></li>
        <li><img src="http://cdn4.iconfinder.com/data/icons/devine_icons/128/PNG/Folder%20and%20Places/Home.png" /></li>
      </ul>
    </div>

    <div id="content"></div>
  </body>
</html>

Answer 1

window.location.hash将为'#!/test'

试试这个：

var page = window.location.hash.replace('#!/', '');

update(page);

Answer 2

看起来您需要更改传递给更新的page以取出额外的字符。使用方括号表示法时，您尝试引用的属性必须完全是定义它的字符串。目前，您正在尝试获取一个名为[“＃！/”]的属性，但它不存在。

function update(page) {
    $("body").css("display", "none");
    $("#content").html(pages[page.replace("#!/", "")][1]);
    $("body").fadeIn(2000);
}

jsFiddle example

用Jquery改变页面

2 个答案: