I'm new to working with JS/jQuery, I've been currently trying to figure out how to make this work, by trying many different ways that I've found here and on different sites, and am unable to get this working.
I have a website that has tabs, that changes a div's content when the click on the buttons in the menu. This all works fine, but I want to be able to link to each separate "page" using hash tags example.com/#tab-1
HTML:
<div class="tabWrapper">
<div class="tabContent">
<div class="label">TAB 1</div>
</div>
<div class="tabContent">
<div class="label">TAB 2</div>
</div>
tabWrapper looks like this after being generated
<div class="tabWrapper">
<ul class="tabs">
<li class="tab-1">TAB 1</li>
<li class="tab-2">TAB 2</li>
</ul>
JS:
if ($('div.tabWrapper').length != 0)
{
$('div.tabWrapper').each(function()
{
var printTabs = '<ul class="tabs">';
var tabContent = $(this).find('.tabContent');
var tabCount = tabContent.length;
$(tabContent).each(function(key)
{
if (key != 0)
{
$(this).hide();
}
var label = $(this).find('.label').text();
if (!label)
{
label = 'Tab ' + (key + 1);
}
$(this).addClass('tab-' + key);
printTabs+= '<li class="tab-' + key + '">' + label + '</li>';
});
$(this).prepend(printTabs + '</ul>');
$(this).find('li:first').addClass('active');
});
}
$('.tabWrapper').delegate('ul.tabs li', 'click', function()
{
if ($(this).is('.active'))
{
return false;
}
var id = $(this).attr('class').split('-');
id = id[1];
var parent = $(this).parent().parent();
parent.find('ul.tabs li').removeClass('active');
$(this).addClass('active');
parent.find('.tabContent').hide()
parent.find('.tab-' + id).animate({ opacity: 'show' }, animationSpeed);
});
Here is what I currently have, which I'm trying to get to work
setInterval(hash,1000);
function hash() {
if(window.location.hash){
var hash = window.location.hash.substring(1);
$("." + hash).click();
}
}
Which I added in the js file just above
<<b>pre>$('.tabWrapper').delegate('ul.tabs li', 'click', function()
I'm not sure how far I'm off with that code, as it doesn't seem to work at all. I just want it to see if there is a hash tag in the url, and if there is then run the click function to change the content.
Thank you.