Question

I have a simple site where each “page” is actually a section. The sections are layered on top of each other using position:absolute and z-index; when a navigation item is clicked, the section with an id matching the class name of the navigation item is promoted to the top of the stack, changing the “page”.

What’s got me stuck now, though, is figuring out how to target a particular section from a link within the content of another section. I know the gist of what I have to do, but I’m lost as far as the execution goes.

How I imagine it needs to go is this:

$('section a[href^=#]').click(function(){
                var target = $(this).attr(href).(strip the hashtag from the beginning of the link and output the resulting value);
$('body').find('section[id='+target+']').addClass('active').css('z-index', '2')
$('body').find('section[id!='+target+']').removeClass('active').css('z-index', '1')
                });

I imagine this involves RegEx somehow, which I know nothing about. Any thoughts?

Answer 1

No need for regexen: the underlying DOM object for links exposes the Location interface, which gives you direct access to the parts of the URL as definitively parsed by the browser itself. The hash property holds the anchor part including leading #, so slice that one character off:

this.hash.slice(1);

Or even, since you can reuse the # for an ID selector:

$(this.hash).addClass...