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

Question

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

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/

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

Load page and highlight anchor div using jQuery UI

html

javascript

jquery

jquery-ui

highlight