I have created a page with a series of thumbnails that reveal content below when clicked. The content is positioned absolutely and set to display:none, with javascript changing this for each thumbnail.
(I am not very familiar with javascript and learned this technique from a tutorial found here: )
This is how I have configured the links:
<a href="javascript:tabSwitch(1, 19, 'tab_', 'content_');" id="tab_1" >
<img src="image1.jpg" />
<h3 class="designers">
Link 1
</h3>
</a>
Where '1' represents the tab number and '19' is the total number of tabs.
Here is the function code:
function tabSwitch(active, number, tab_prefix, content_prefix) {
for (var i=1; i < number+1; i++) {
document.getElementById(content_prefix+i).style.display = 'none';
document.getElementById(tab_prefix+i).className = '';
}
document.getElementById(content_prefix+active).style.display = 'block';
document.getElementById(tab_prefix+active).className = 'active';
}
Everything works as intended, but now I need to create separate URLs for each tab and I am unsure how to achieve this within the current setup (if it is even possible).
Do I need to start over or can someone provide guidance on this matter?