CODEWITHSUNDEEP
javascriptjqueryhash
user2961861
user2961861

Reputation:

jquery - significance of .hash in this function

I borrowed someone's jquery function and adapted it for my own use, but I do not understand exactly how it works. Specifically the line var content = this.hash.replace('/', '');

Could someone please explain .hash in this context? The full jsFiddle is here: http://jsfiddle.net/bsapaka/KjcnL/3/

$(document).ready(function () {

    var tabs = $(".tabs-group li a");

    tabs.click(function () {
        var content = this.hash.replace('/', '');
        tabs.removeClass("active");
        $(this).addClass("active");
        $("#panel > div").hide();
        $(content).fadeIn(700);
        $(this).delay( 800 );
    });

});

Upvotes: 2

Views: 267

Answers (3)

JessieArr
JessieArr

Reputation: 786

If you look at the way the following anchor tag is set up:

<li><a href="#/hnf">Health & Fitness</a>

The hash value is the part of the href attribute after and including the hashtag: #

In this case, the code stores the ID of the element to be shown when the anchor tag is clicked in the hash, then a few lines below, the value of the hash is used as a JQuery selector to show the specified element (note that the hashtag is also the ID selector in JQuery):

var content = this.hash.replace('/', ''); // returns '#hnf' for the <a> tag above
[...]
$(content).fadeIn(700); // '#hnf' is the ID of an image on your page to display

Beware though, because using hash navigation in this way may cause unexpected results when a user tries to use the back button. Hashtag navigation is usually used to create entries in a browser's history upon displaying new data without actually navigating to a different HTML page. You should research hash navigation further for ways to prevent some of the pitfalls. The following SO post may be a good place to start if you find the back button behavior is undesired:

How to make the browser back button disregard hash tags?

Upvotes: 1

Zach Spencer
Zach Spencer

Reputation: 1889

I believe that hash is found on elements that contain an href attribute or property

the bolded text is the hash.

http://www.example.com/page.html#stuff

Upvotes: 0

cookie monster
cookie monster

Reputation: 10972

That gets the part of the href after (and including) the #.

An <a> element has several such properties, like:

  • hash
  • host
  • href
  • hostname
  • pathname
  • protocol
  • search

In that context, they're using the hash as an id to fetch another element. Because the # is present, it's a valid id selector.

Upvotes: 2

Related Questions