How to make those dynamic anchor links with jQuery?

Question

I've recently discovered a website which does something really cool! Example:

• There are two links "Cat" and "Dog".
• There are two DIV containers, id="catImage" and id="dogImage"
• The initial URL looks like http://mysite.com/#cat
• Initially, the cat image is visible
• Clicking on the Dog link will fade out the catImage div and fade in the dogImage div
• Additionally, it will change the anchor in the browser URL to: http://mysite.com/#dog
• Opening the website with httü://mysite.com/#dog will show the dog image initially

Is this possible using jQuery? How would I scan for that anchor, and how would I call a function when the link is clicked without causing the link to follow some URL? I'm an objective-c dude and don't know anything about JS... hope my question isn't too dumb for you.

Answer 1

Update: Oh I forgot, obviously you should read a tutorial about jQuery if you want to use it.

You can get and set the hash of the URL via window.location.hash, e.g.

alert(window.location.hash);
//and 
window.location.hash = 'test'

You should read about events in order to fully understand how it works. The event object provides a preventDefault() method, which is exactly doing what it says (preventing the default behavior).

E.g. with jQuery:

$('a').click(function(e) {
    //Do something..
    // prevent to follow the link
    e.preventDefault();
});

Answer 2

Using location.href you can get the full URL in javascript.

you can substring or string replace your domain name and rest will be your parameter dog or cat.

When you have the parameter .

jquery functions like show(); hide (); to show cat and hide dog.

By adding or removing style also you can change images

.add() is there

addClass removeClass is there

http://mattwhite.me/11tmr.nsf/D6Plinks/MWHE-695L9Z

http://rockmanx.wordpress.com/2008/10/03/get-url-parameters-using-javascript/

http://api.jquery.com/show/

http://api.jquery.com/addClass/

Answer 3

with this markup:

<div id="images">
    <div id="catImage">some cat image here</div>
    <div id="dogImage" style="display:none;">some dog image here</div>
</div>
<div id="anchors">
    <a href="#cat">catImage anchor</a>
    <a href="#dog">dogImage anchor</a>
</div>

and with this js (assuming jquery 1.4.x)

    $(function () {

        $("#anchors a").click(function () {
            // send the index of the anchor to the function
            fadeImage($(this).index());
        });

        var hash = window.location.hash;
        if (hash) {

            var elementId = "#" + hash.substring(1) + 'Image';
            var $div = $(elementId);

            // check if this element exists, and if so, send that index to the function
            if ($div.length) {
                fadeImage($div.index());
            }

        }

    });

    function fadeImage(index) {
        $("#images div:eq(" + index + ")").fadeIn().siblings().fadeOut();
    }

And to explain what's going on here:

I'm using the jquery index() function to get the index of the element relative to its siblings. I then pass that index to the fadeImage function, which finds the same index div and fades it in. By using chaining, I then look to the siblings of that div to fade them out. This is useful if you have more than 2 divs to fade out here.

For the anchor/hash usage, I just find the div with the matching id and get its index, and pass it to the same function.

jQuery docs can explain the various methods much better than I can.