Jquery, activate script if hashtag on end of URL matches a class name

Question

Hey folks. I am using a little bit of jQuery to do a live sort of my portfolio when various categories are selected. Basically, the script matches the content of an <li> tag on click (my menu) with the class names of other <li> tags elsewhere on the page. The result is the portfolio items match the nav clicked will show and hide the rest. A live sort. However, i want to add the ability to add a permalink to activate the jquery to sort by a hashtag at the end.. for example: work.html#category1 would automatically set the script to hide everything but category one. My script and basic page setup is below. Any help would be greatly appreciated!

 <script>
    $(document).ready(function() {
        $('#worknavwrap p a').click(function() {
            $(this).css('outline','none');
            $('ul#worknavwrap .current').removeClass('current');
            $(this).parent().addClass('current');

            var filterVal = $(this).text().toLowerCase().replace(' ','_');

            if(filterVal == 'all') {
                $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
            } else {

                $('ul#portfolio li').each(function() {
                    if(!$(this).hasClass(filterVal)) {
                        $(this).fadeOut('normal').addClass('hidden');
                    } else {
                        $(this).fadeIn('slow').removeClass('hidden');
                    }
                });
            }

            return false;
        });
    });
    </script>
    <ul id="worknavwrap">
      <li><a href="#category1">Category 1</a></li>
      <li><a href="#category2">Category 2</a></li>
      <li><a href="#category3">Category 3</a></li>
    </ul>
    <ul id="portfolio">
      <li class="category1">Item 1</li>
      <li class="category1">Item 2</li>
      <li class="category2">Item 3</li>
      <li class="category1">Item 4</li>
      <li class="category3">Item 5</li>
      <li class="category3">Item 6</li>
      <li class="category2">Item 7</li>
      <li class="category1">Item 8</li>
    </ul>

score 8 · Accepted Answer · answered Jul 28 '10 at 20:20

8

Do this:

if(window.location.hash) {
    $('#worknavwrap a[href=' + window.location.hash + ']').click();
}

It will find the <a> element that has the href attribute matching the hash, and trigger its .click() handler.

Even better would be to provide ID attributes for the <a> elements like:

<ul id="worknavwrap">
    <li><a id="category1" href="#category1">Category 1</a></li>
    <li><a id="category2" href="#category2">Category 2</a></li>
    <li><a id="category3" href="#category3">Category 3</a></li>
</ul>

So then you could just do:

if(window.location.hash) {
    $(window.location.hash).click();
}

By the way, for your code to match your HTML, you need:

$('#worknavwrap li a').click(function() {...

instead of:

$('#worknavwrap p a').click(function() {...

and also:

var filterVal = $(this).text().toLowerCase().replace(' ','');

instead of:

var filterVal = $(this).text().toLowerCase().replace(' ','_');

answered Jul 28 '10 at 20:20

user113716

318,772
63
451
440

Ahhh thank you good sir! I went with the ID method and this worked perfectly. As far as the selectors, they are correct for my original HTMl file but not my snippet I created for this question, whoops. Any guesses on why the hash tag is not automatically appending to the URL when each nav item is clicked? – liquilife Jul 29 '10 at 14:29
@liquilife - Probably because of your `return false;` statement at the end of the handler. This prevents the default behavior of the `` element. If you want the default behavior, then you should remove that line. – user113716 Jul 29 '10 at 14:51
Yup, that was it. Everything works perfectly now. :) Thanks again! – liquilife Jul 29 '10 at 15:31

score 1 · Answer 2 · answered Jul 28 '10 at 20:24

1

If you want an insane number of features along with the ability to do what you are looking at I suggest having a delicious BBQ.

http://benalman.com/projects/jquery-bbq-plugin/

answered Jul 28 '10 at 20:24

Jonathan Park

775
5
12

Jquery, activate script if hashtag on end of URL matches a class name

2 Answers2

Linked