Linking Primary Navigation children to one of the Portfolio Filters

How do I get click through from a primary navigation option to go directly to one of my portfolio filters?

For example, I have these options under primary nav:

<li><a href="#"><div>UX</div></a></li>
<li><a href="#"><div>UI</div></a></li>
<li><a href="#"><div>Brand</div></a></li>
<li><a href="#"><div>Illustration</div></a></li>
<li><a href="#"><div>Motion</div></a></li>
<li><a href="#"><div>Print</div></a></li>
<li><a href="#"><div>Photography</div></a></li>

When the user clicks the option "UX", I want them to be sent to my portfolio with the "UX" filter active.

See attachment please. I would LOVE to get this resolved today if at all possible. LOVE YOU ALL!!! this template is so good.

Thanks!

Oops I see that my attachment didn't work. Here it is again.

Could I get some help today? Hoping to hear from you. Thanks so much!

Ok thanks! I'll try it out today.

A little more guidance needed. If this is the right script to grab, where do I place it? Which pages? all of them? Also would my URL be this? http://www.crushtown.com#filter=.filter-class but with my .pf-brand etc.?

<!-- Portfolio Script
============================================= -->
<script type="text/javascript">

	jQuery(window).load(function(){

		var $container = $('#portfolio');

		$container.isotope({ transitionDuration: '0.65s' });

		function getHashFilter() {
			var hash = location.hash;
			// get filter=filterName
			var matches = location.hash.match( /filter=([^&]+)/i );
			var hashFilter = matches && matches[1];
			return hashFilter && decodeURIComponent( hashFilter );
		}

		var isIsotopeInit = false;

		function onHashchange() {
			var hashFilter = getHashFilter();
			if ( !hashFilter && isIsotopeInit ) {
				return;
			}
			isIsotopeInit = true;
			// filter isotope
			$container.isotope({ filter: hashFilter });
			// set selected class on button
			if ( hashFilter ) {
				$('#portfolio-filter li').removeClass('activeFilter');
				$('#portfolio-filter li').find('[data-filter="' + hashFilter + '"]').parent('li').addClass('activeFilter');
			}
		}

		$(window).on( 'hashchange', onHashchange );
		// trigger event handler to init Isotope
		onHashchange();

		$('#portfolio-filter a').click(function(){
			$('#portfolio-filter li').removeClass('activeFilter');
			$(this).parent('li').addClass('activeFilter');
			var selector = $(this).attr('data-filter');
			$container.isotope({ filter: selector });
			var filterAttr = $( this ).attr('data-filter');
			location.hash = 'filter=' + encodeURIComponent( filterAttr );
			return false;
		});

	});

</script>

I tried it and it isn't working

http://www.crushtown.com/#filter=.pf-UX

http://www.crushtown.com/portfolio-hash-filter.php#filter=.pf-UX

tried this, not working either

UPDATE

QUESTION #1 - active state not working
I made some progress by guessing. Now need to get the <li class="activeFilter"> to work. Right now, no matter what primary nav item I choose... the "Show All" is active even though the display results are truly UX, UI, Brand, etc. when I get to the Portfolio screen.

QUESTION #2 - what pages do I put that JS Code on?
Also I don't know which pages to put the JS Code you mention when you said "use the JS Code added at the bottom of the "portfolio-hash-filter.html Template"

It's working great. Active filter is now true to top nav choice.

Thanks a TON!!!