Question

What I want to do when a user visits the page, the anchor in the url will determine what content is shown at the top. This should be done on the client side, not on the server side.

For example, let’s say I have the HTML:

<div id='menuitems'>
  <div id='appetizer'>HTML here</div>
  <div id='maincourse'>HTML here</div>
  <div id='dessert'>HTML here</div>
</div>

So what I want is when the user visits this page:

mypage.html#dessert

Instead of the usual anchor text behavior, I want to use something like jquery to move the dessert text to the top. So the HTML the user see is this:

<div id='menuitems'>
  <div id='dessert'>HTML here</div>
  <div id='appetizer'>HTML here</div>
  <div id='maincourse'>HTML here</div>
</div>

or: mypage.html#maincourse

<div id='menuitems'>
  <div id='maincourse'>HTML here</div>
  <div id='appetizer'>HTML here</div>
  <div id='dessert'>HTML here</div>
</div>

If there’s no anchor or it’s unrecognized then just don’t do anything.

Answer 1

How about

$(document).ready(){
    $('#menuitems > ' +location.hash).prependTo('#menuitems');
});

http://api.jquery.com/prependTo/