Javascript 使用Jquery更改页面_Javascript_Jquery_Html_Css

Javascript 使用Jquery更改页面

javascript jquery html css

Javascript 使用Jquery更改页面,javascript,jquery,html,css,Javascript,Jquery,Html,Css,所以我试着用散列来制作每页的动画。加载（主页）的第一个页面会完美地淡入淡出，但我尝试访问的页面（查看散列内容）根本不会进行动画/加载。为什么会这样 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> <title>Jac

所以我试着用散列来制作每页的动画。加载（主页）的第一个页面会完美地淡入淡出，但我尝试访问的页面（查看散列内容）根本不会进行动画/加载。为什么会这样

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


杰克·库克
#纳瓦尔{
列表样式类型：无；
显示：块；
文本对齐：居中；
}
#纳瓦尔里酒店{
显示：内联块；
}
#导航条img{
宽度：64px；
高度：64px；
填充：0 10px 0 10px；
}
#导航栏a图像：悬停{
不透明度：0.4；
}
$（文档）.ready（函数（）{
页数={
“主页”：[“主页”，“这是我的主页！”，“主页””，
“测试”：[“测试”，“这是一个测试页面”，“测试”]
};
page=window.location.hash！=“window.location.hash.substr（3）：“home”；
更新（第页）；
$（文档）。在（“单击”，“a”，函数（）上）{
if（$（this.attr（“href”）.substr（0,4）！=“http”）{
event.preventDefault（）；
window.location.hash=“！/”+$（this.attr（“href”）；
}
});
$（窗口）.on（“hashchange”，函数（）{
$（“主体”）.fadeOut（1000，函数（）{
更新（window.location.hash）；
});
});
});
功能更新（第页）{
$（“body”）.css（“display”、“none”）；
$（“#content”）.html（第[页][2]）；
$（“正文”）。fadeIn（2000年）；
}

窗口。位置。散列将是。#/测试“

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

update(page);

看起来您需要更改传递到更新中的页面
，以去掉多余的字符。使用方括号表示法时，您尝试引用的属性必须正好是定义它的字符串。目前，您正在尝试获取名为[“#！/”]的属性，但该属性不存在
function update(page) {
    $("body").css("display", "none");
    $("#content").html(pages[page.replace("#!/", "")][1]);
    $("body").fadeIn(2000);
}

这个.substr（3）
是做什么的？因为我做散列的方式，你也看到我添加了吗！/这并没有什么区别，因为我是如何在javascript代码顶部的页面变量中将三个字符作为子串的。