Question

I have this jQuery which shows/hides content depending on the list item that’s clicked. I also want to be able to show specific content upon landing on this page, dependant on what link the user clicked on another page.

I know that to make this happen, I have to carry the variable over from the other link somehow, and make it act as the variable.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>    
<script type="text/javascript"> 
$(document).ready(function() {
$('#side_nav ul li a').click(function() {
    $('#side_nav ul li.current').removeClass('current');
    $(this).parent().addClass('current');

    var filterVal = $(this).attr('class');

        $('#content div.section').each(function() {
            if($(this).hasClass(filterVal)) {
                $(this).fadeIn(200);
            } else {
                $(this).hide();
            }
        });
    return false;
});
});
</script>

I’ve tried adding #desired_content to the end of the url at the link on the separate page and I know that using window.location.hash, I can pull that hash lable in as the variable somehow but I’m lost as to exactly how to accomplish that.

Please help.

EDIT: I added this to the external page:

<li><a href="./about.html#how_it_works">HOW IT WORKS</a></li>

and this to the target page, just to TEST whether the class being added

<script type="text/javascript"> 
$(document).ready(function() {
    var myHash = window.location.hash;

    if( myHash == "#how_it_works" ){
        $('#content div.how_it_works').addClass('test');
    }else if( myHash == "#option2" ){
        // fade in option2
    }


});     
</script>

I don’t understand why this isn’t working…

Answer 1

Hash URLs have mostly been used for in-page anchor tags (back to top, etc) and so I’d suggest that directing someone to a certain section of your page using hash URLs makes a lot of sense.

What I’ve done, once on the page, was grab the hash URL via window.location.hash and manipulate your page based on this string.

var myHash = window.location.hash;

if( myHash == "#desired_content" ){
// fade in option1
}else if( myHash == "#option2" ){
// fade in option2
}