How to make a URL link to another state of the page?

Question

I'd like to share a page in a state when the second link is active (eg "http:/ /mypage#green-color").

I tried to add to the second link onClick="window.location='#green-color';" attribute. It changes the URL in the browser's address window, but I can't share it with others.

code in JS Fiddle

<a href="#" id="all">All Colors</a>
<a href="#green" id="green-color">Green Color</a>
<div id="red"></div>
<div id="green"></div>

Two states of the page:

$( "#all" ).click(function() {
  $( "#red" ).show(200);
});
$( "#green-color" ).click(function() {
  $( "#red" ).hide(200);
});

Answer 1

I don't know if I understand but see my HARD CODE solution:

<script>
$(document).ready(function(){
    if(document.URL == 'http://mypage#green-color'){
         $( "#red" ).hide(200);   
    }
    else
    {
         $( "#red" ).show(200);
    }
});
</script>

Answer 2

I suspect what you want is to be able to change the state of page when you clcik on a hashed link

hash is the part of url prefixed with # .

You can retrieve the hash on page load using location.hash then do whatever state changes you want on page load based on hash value. Not clear at all in question what you are wanting to do.

Answer 3

try passing divId in Url

like this

onClick="window.location='#green';"

And for for effects use window.location.hash method.

var hashValue=window.location.hash;
if(hashValue=="#green")
{
 $( "#red" ).hide(200);
}