Is there a better way to do this?

[sethwb]

This code is for tabbed content (click a tab and it changes what is displaying beneath the tabs).

My javascript:

var ztabs = new Array();

$(document).ready(function() {
$("a[name^='tab-']").each(function() {
$(this).click(function() {
if( $("#" + this.name).is(':hidden') ) {
for(mi=1;mi<4;mi++) {
ztabs[mi] = document.getElementById('tab-'+mi);
if( ztabs[mi].style.display == "") {
ztabs[mi].style.display = "none";
}
}
$("#" + this.name).show();
}
return false;
});
});
});


my html:

<table class="InfoTable">
<tbody>
<tr>
<td colspan="4" class="InfoTableItem">
product1 name
</td>
</tr>
<tr>
<td class="InfoTableTab">
<a href="#" name="tab-1">Description</a>
</td>
<td class="InfoTableTab" name="tab-2">
<a href="#" name="tab-2">Application</a>
</td>
<td class="InfoTableTab" name="tab-3">
<a href="#" name="tab-3">Datasheet</a>
</td>
<td class="InfoTableSpace">
</td>
</tr>
<tr>
<td colspan="4" class="InfoTableTabContent">
<div id="tab-1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat...
</div>
<div id="tab-2" style="display: none;">
2
</div>
<div id="tab-3" style="display: none;">
3
</div>
</td>
</tr>
</tbody>
</table>



Any ideas on how to crunch that nested if statement inside a loop inside an if statement?

[VIPStephan]

A table isn’t the correct markup to use as this isn’t tabular data.
The name attribute isn’t allowed on anything except form controls.
Why don’t you use one of the many tab scripts (http://stilbuero.de/jquery/tabs_3/) that are already out there?

[sethwb]

#1 - I'm not even sure what you mean by this? They are tabs on my screen!

#2 - I wanted to use a class, but we are using multiple classes.. and I had a hard time figuring out how to only detect the one (even if there were two or more classes).

#3 - I am trying to strike a balance between learning to write JavaScript from scratch and getting the darn thing done. Obviously jQuery is not the way to go if I want to become proficient in writing jS from scratch. However, I know there are tons of things to think about when structuring my scripts and so I'm just seeking advice and ideas that will help me learn new methods & practices and/or sharpen the ones I'm already using.

I hope that makes sense.

[sethwb]

I figured it all out! Here it is for anyone else with the same situation I hope this helps you!


$(document).ready(function() {
$(".InfoTableTab a").click(function() {
$(this).closest(".InfoTable").find(".InfoTabDiv").hide();
$("#" + this.name).show();
return false;
});
});


Thanks for all your help mr. Stephan.

[rnd me]

The name attribute isn’t allowed on anything except form controls.



and anchors, and images, and maps, and forms, and frames, and objects, and meta...