V3p0 V3p0 - 22 days ago 7
HTML Question

How do I make my javascript appear onload?

I have the following html and Javascript. I want my first tab to appear on load. I have tried a few different things but cant get anything to work.

<script type="text/javascript">
$("ul.tabs li.label").hide();
$("#tab-set > div").hide();
$("#tab-set > div").eq(0).show();
$("ul.tabs a").click(
function() {
$("ul.tabs a.selected").removeClass('selected');
$("#tab-set > div").hide();
$(""+$(this).attr("href")).fadeIn('slow');
$(this).addClass('selected');
return false;
}
);
$("#toggle-label").click( function() {
$(".tabs li.label").toggle();
return false;
});
</script>

<div class='container'>
<div class='column span-24 last' id='tab-set'>
<ul class='tabs'>
<li><a href='#text1' class='selected'>tab 1</a></li>
<li><a href='#text2'>tab 2</a></li>
<li><a href='#text3'>tab 3</a></li>
</ul>
<div style="clear:both"> </div>
<div id='text1'>
</div>
<div id='text2'>
</div>
<div id='text3'>
</div>

Answer

Try this:

$("#tab-set > div").eq(1).show();
// --------------------^      changed from 0

You were trying to show the first div with .eq(0), but the first div inside #tab-set is this one:

<div style="clear:both"> </div>

You want the second div, the first of your actual "functional" divs.

And of course as you've been told repeatedly, your JS needs to be either after your html elements, or enclosed in a document ready handler.

Comments