JavaScript可变地放入url中，然后在重新加载时使用它

我们正在制作一个音乐页面，列出专辑、歌曲和歌词

我们在每个专辑下面都有一个“查看更多”按钮，单击该按钮可显示歌曲列表（使用jquery，向下滑动隐藏的div）。我们希望在有人点击歌曲时向URL添加一个变量（或者在“隐藏”歌曲时将其删除），这样可以创建一个指向该部分的永久链接。如果有人通过，它会自动显示该div open

所以链接应该是这样的 或

（有人能帮我找出更好的使用方法吗？在“#”和“？”之间）

我们想对单曲的歌词做同样的事情。如果有人单击歌曲标题，它会向URL添加另一个带有歌曲ID的变量

因此，如果有人点击歌曲标题，它将

我们可以处理所有代码，使所有内容显示在页面上，但我不知道如何使用javascript在页面上添加变量，这样，如果有人想将歌词链接到特定歌曲，他们可以共享该链接，当他们访问时，将显示正确的div

有人能帮我指出正确的方向吗？欢迎提供更好的方法

---

谢谢！

如果用？分隔，它是一个查询字符串，是将变量放入页面的正常方式。如果用#分隔，它是散列，它指的是页面内的导航

如果使用#可以导航而不刷新页面。如果从Javascript（location.href=blah？album=1039）向查询字符串添加一个项目，页面将被重新加载。我认为这不是您想要的

---

在任何情况下，当您单击链接以显示隐藏的div时，不要更改location.href。只需让您的锚定标记在页面内导航即可，如

中所示，如果您用？分隔，它是一个查询字符串，是将变量放到页面上的正常方式。如果您用#分隔，它是散列，并且它指页面内的导航

如果使用#可以导航而不刷新页面。如果从Javascript（location.href=blah？album=1039）向查询字符串添加一个项目，页面将被重新加载。我认为这不是您想要的

在任何情况下，当您单击链接以显示隐藏的div时，请不要更改location.href。只需让您的锚定标记在页面中导航，就像在

中一样，下面是我的尝试：

所需代码：

var HashSearch = new function () {
   var params;

   this.set = function (key, value) {
      params[key] = value;
      this.push();
   };

   this.get = function (key, value) {
       return params[key];
   };

   this.keyExists = function (key) {
       return params.hasOwnProperty(key);
   };

   this.push= function () {
       var hashBuilder = [], key, value;

       for(key in params) if (params.hasOwnProperty(key)) {
           key = encodeURIComponent(key), value = encodeURIComponent(params[key]);
           hashBuilder.push(key + ( (value !== "undefined") ? '=' + value : "" ));
       }

       window.location.hash = hashBuilder.join("&");
   };

   (this.load = function (paramString) {
       params = {}
       var hashStr = paramString || window.location.hash, hashArray, keyVal
       hashStr = hashStr.substring(1);

       if (hashStr === "") return;

       hashArray = hashStr.split('&');

       for(var i = 0; i < hashArray.length; i++) {
           keyVal = hashArray[i].split('=');
           params[decodeURIComponent(keyVal[0])] = (typeof keyVal[1] != "undefined") ? decodeURIComponent(keyVal[1]) : keyVal[1];
       }
   })();
};

您的链接如下所示：

<a href="#album=2">View album</a>
<a href="#album=2&song=3">View song</a>

您的内容：

<a name="album=2"></a> // auto scroll to location.. not required
<div id="album2">
   <div id="album2song3"></div>
</div>

//自动滚动到位置..不需要

以下是我的尝试：

所需代码：

var HashSearch = new function () {
   var params;

   this.set = function (key, value) {
      params[key] = value;
      this.push();
   };

   this.get = function (key, value) {
       return params[key];
   };

   this.keyExists = function (key) {
       return params.hasOwnProperty(key);
   };

   this.push= function () {
       var hashBuilder = [], key, value;

       for(key in params) if (params.hasOwnProperty(key)) {
           key = encodeURIComponent(key), value = encodeURIComponent(params[key]);
           hashBuilder.push(key + ( (value !== "undefined") ? '=' + value : "" ));
       }

       window.location.hash = hashBuilder.join("&");
   };

   (this.load = function (paramString) {
       params = {}
       var hashStr = paramString || window.location.hash, hashArray, keyVal
       hashStr = hashStr.substring(1);

       if (hashStr === "") return;

       hashArray = hashStr.split('&');

       for(var i = 0; i < hashArray.length; i++) {
           keyVal = hashArray[i].split('=');
           params[decodeURIComponent(keyVal[0])] = (typeof keyVal[1] != "undefined") ? decodeURIComponent(keyVal[1]) : keyVal[1];
       }
   })();
};

您的链接如下所示：

<a href="#album=2">View album</a>
<a href="#album=2&song=3">View song</a>

您的内容：

<a name="album=2"></a> // auto scroll to location.. not required
<div id="album2">
   <div id="album2song3"></div>
</div>

//自动滚动到位置..不需要

这些div的内容是从ajax加载的，还是已经在页面上了？只是隐藏？只是隐藏。我们可以用任何一种方式来实现。这些div的内容是从ajax加载的，还是已经在页面上了？只是隐藏？只是隐藏。我们可以用任何一种方式来实现。听起来我们肯定想使用#。我们不想这样做o刷新页面，只要有一个perma链接就可以了。听起来我们肯定想使用#。我们不想刷新页面，只要有一个perma链接就可以了。