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

Question

I'm trying to setup my anchor tags in a way similar to StackOverflow where if I'm on Page A and click on a link to a div on Page B, the div is highlighted via jQuery UI's, highlight feature. What I'm having trouble figuring out is how to pass the anchor link to the new page and highlight it. Here is the page scenario.

Page A

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

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

Aside from the setup itself I have a few performance concerns. Ideally I'm thinking that you'd have to loop through every .track on every page load , regardless if those particular divs are on the page. What would be the best approach to do this?

Answer 1

You wrote wrong the ids in your html code, remove the '#' symbol. Something like the following will do the trick.

$(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/