从外部链接到页面携带变量并插入jQuery脚本onload

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
}

Answer 2

I will suggest to store the variable on localStorage in first page then load the variable from localStorage in second page. It will be simpler rather than passing hash URL which is not the proper purpose.

First Page

<a href="secondPage.html" id="link">Go to second page</a>
<script type="text/javascript"> 
$(document).ready(function() {
$('#link').click(function(){
    // set your variable when someone click the link
    localStorage.setItem("myVariable", "someValue");
});
});
</script>

Second Page

<script type="text/javascript"> 
$(document).ready(function() {
var yourVariable = localStorage.getItem("myVariable");
// do your stuff according to this variable that passed from firstpage
//...
});
</script>