Question

On my site I have user profiles. Each user profile can have a number of tabs which have a javascript function to show the selected tab and hide all other tabs.

What I’m trying to do is allow a group of users called authors to be able to send a link to their profile and when that profile is loaded, show a specific tab.

Take this user’s profile:

http://www.findyourgeek.com/jasonward

I’d like to let this user link to their reviews as follows:

http://www.findyourgeek.com/jasonward#reviews

I put code in the document.ready function that I thought would work but it doesn’t:

if(window.location.hash.toLowerCase() == "reviews")
{
$('#profileAbout').hide();
$('#profileInterests').hide();
$('#profileOnline').hide();
$('#profileArticles').hide();
$('#profileReviews').slideDown();
$('#profileStatistics').hide();
$('#tabsAbout').removeClass('selected');
$('#tabsInterests').removeClass('selected');
$('#tabsOnline').removeClass('selected');
$('#tabsArticles').removeClass('selected');
$('#tabsReviews').addClass('selected');
$('#tabsStatistics').removeClass('selected');
}

However, when the code runs it does not show the tab. The code that reads the hashtag is correct but it doesn’t run the code below it.

Also, that code is defined as $('#tabsReviews a').click() as well.

Any ideas as to why this doesn’t work or any better ideas on how to do it better would be appreciated.

Answer 1

That’s because location.hash includes the #. This should work:

if(window.location.hash.toLowerCase() == "#reviews")

Also you can combine selectors like this:

$('#profileAbout, #profileInterests, #profileOnline, #profileArticles').hide();