0

そのため、ハッシュを使用してページからページへとアニメーション化しようとしています。ロードする最初のページ (ホーム) は完全にフェード インおよびフェード アウトしますが、取得しようとしているページ (ハッシュのものを見てください) は、まったくアニメーション化/ロードされません。どうしてこれなの？

<!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>
4

2 に答える 2

0

window.location.hashになります'#!/test'

これを試して：

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

update(page);
于 2013-04-10T01:01:08.983 に答える
0

page余分な文字を削除するには、 update に渡されたものを変更する必要があるようです。角括弧表記を利用する場合、参照しようとしているプロパティは、それを定義する文字列と正確に一致する必要があります。現在のところ、["#!/"] というプロパティを取得しようとしていますが、存在しません。

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

jsFiddle の例

于 2013-04-10T01:03:54.757 に答える