Simply check the fragment identifier value in the location string. Pass the object we want to change in based on some conditional parameters.
if(window.location.hash){
//fragment identifier such as '#mission', or '#about' has been found
var sub = '',
hsh = window.location.hash.split('#')[1]; // get string without # sign
switch(hsh){
case 'mission' :
sub = 'sub1';
break;
case 'contact' :
sub = 'sub2';
break;
}
switchContent(sub);
}
In the above, we check for the fragment identifier. If found, we build a switch statement to prepare a string. Once we're done with the switch, we pass the string to the function which will in turn fire the content loader.
Ensure this code runs inside $(document).ready(function(){ }):
otherwise the DOM elements may not be available.
Note: I would suggest changing this to build a more relationship friendly design pattern. Where the fragment identifier
and the element containing the markup
share some common string, such as a data attribute. <div data-rel="contact" id="sub1">
. If this is done, then we no longer need to build a switch statement where we have to manually assign to a variable. If you're open to a more dynamic and fluid method, I'll be happy to build you out an example, just respond below.
Here's a more fluid method.
We should build relationships so we can keep things more sane. Let's take a look at how we should change the content divs.
<div class="info" id="mission">content 1</div>
<div class="info" id="about">content 2</div>
<div class="info" id="contact">content 3</div>
You'll see we modified the ids
so they have a special relationship with not only the content inside, but the fragment identifier we're trying to work with. This way, we can reference that information back in our conditional statement that checks for the hash
existence. We also added a new class, info
which will allow us to make the code cleaner.
Now, let's clean up that content switcher function. Before, we were using a ternary operator to check if the obj exists and if not, assigning some arbitrary string to it; let's not do that.
function switchContent(did){
$('.info').hide(0); //hide all the elements.
$('div[id='+did+']').show(); //show only what we want!
}
That's it for our content switcher! Now let's build our conditional statement for the existence of the hash tag.
$(function(){
if(window.location.hash){
switchContent(window.location.hash.split('#')[1]);
}
});
We've shortened the code, and made it more fluid. In the above, we've wrapped our conditional check within the ready
function, so that we know elements exist, and the page will work as intended.
Now let's clean up our anchors so they'll work even if there's no javascript enabled.
<a href="#mission" class="mininav">link 1</a>
<a href="#about" class="mininav">link 2</a>
<a href="#contact" class="mininav">link 3</a>
Great. Now that's much cleaner. No messy inline click functions or random string identifiers. Let's make it work.
$('#navigation a').click(function(e){
e.preventDefault(); //we don't want the default jumping behavior
switchContent($(this).prop('href').split('#')[1]);
});
Easy and clean! We capture the click event, stop the default behavior, then pass the href without the # sign
to the function to switch our content! that's it!