使用 jQuery UI 加载页面并突出显示锚 div

Question

我正在尝试以类似于 StackOverflow 的方式设置我的锚标记，如果我在页面 A 上并单击页面 B 上的 div 链接，则该 div 通过 jQuery UI 突出显示，highlight 功能。我无法弄清楚如何将锚链接传递到新页面并突出显示它。这是页面场景。

页面 A

...
<a href="/albums/1#track-1

页面 B

<!-- /albums/1#track-1 -->

<div class="tracklist">
  ...
  <div id="track-1" class="track">Track 1</div> <!-- Highlights this div -->
  <div id="track-2" class="track">Track 2</div>
  <div id="track-3" class="track">Track 3</div>
  ...
</div>

除了设置本身之外，我还有一些性能问题。理想情况下，我认为您必须在 每个页面加载 上遍历每个 .track，无论页面上是否有这些特定的 div。最好的方法是什么？

Answer 1

您在 html 代码中写错了 id，请删除“#”符号。像下面这样的东西就可以解决问题。

$(document).ready(function() {
  var url = window.location.href; // Returns full current url.
  var hash = url.substring(url.indexOf("#") + 1);

  $('#' + hash).effect('highlight', {color: '#00f'}, 2000);
});

https://jsfiddle.net/jonathanzuniga/f6qohfb8/