How to hide jquery tabbed navigation layers

I have site being developed where I am using jquery to have dropdown content on the page. When you click on one of the tabs at the top, the window drops down with content. My dilemma however is figuring out how to hide these drop downs until a visitor clicks on one of the tabs. Currently, the tab marked tab1 or "Test 1" shows when the page is loaded. How can I hide those layers until the link is clicked. I'm a newbie to understanding jquery but have found that I love its functions and abilities without using Flash.

The script for the dropdowns is:

<script type="text/javascript">
$(document).ready(function(){
$('ul.tabNav a').click(function() {
    var curChildIndex = $(this).parent().prevAll().length + 1;
    $(this).parent().parent().children('.current').removeClass('current');
    $(this).parent().addClass('current');

$(this).parent().parent().next('.tabContainer').children('.current').slideUp('fast',function() {
        $(this).removeClass('current');
        $(this).parent().children('div:nth
child('+curChildIndex+')').slideDown('normal',function() {
            $(this).addClass('current');
        });
    });
    return false;                               
});
});
</script>

The navigational links are setup as:

<div id="nav">
    <ul class="tabNav">
<li class="current"><a href="?tab=1">Test 1</a></li>
<li><a href="?tab=2">Test 2</a></li>
<li><a href="?tab=3">Test 3</a></li>
<li><a href="?tab=4">Test 4</a></li>
<li><a href="?tab=5">Test 5</a></li>
    </ul>
<div class="tabContainer">

    <div class="tab current">
    <h1>Test Heading</h1>
    <p>Test body content </p>
</div>

    <div class="tab">
<h1>Test Heading</h1>
    <p>Test body content </p>
    </div>

    <div class="tab">
    <h1>Test Heading</h1>
    <p>Test body content </p>
    </div>

<div class="tab">
    <h1>Test Heading</h1>
    <p>Test body content </p>
    </div>

<div class="tab">
    <h1>Test Heading</h1>
    <p>Test body content </p>
    </div>
</div>

Here's the css for the tabs:

<style type="text/css">
ul.tabNav {
list-style: none;
width: 100%;
float: left;
}
ul.tabNav li {
float: left;
margin: 0;
}
ul.tabNav li.current {
}
ul.tabNav a {
color: #FFF;
display: block;
height: 66px;
padding: 10px;
text-decoration: none;
width: 66px;
margin-left: 4px;
font-size: 16px;
border: 1px solid #FF9933;
text-align: center;
font-weight: normal;
text-transform: lowercase;
font-family: "Century Gothic";
letter-spacing: 1px;
line-height: 60px;
}
ul.tabNav li.current a {
padding: 10px;
}
div.tabContai开发者_如何学编程ner {
clear: both;
float: right;
width: 500px;
z-index: 9999;
}
div.tabContainer div.tab {
border: 1px solid #FF9933;
color: #FFF;
display: none;
padding: 10px;
background-image: url(images/slideshow_bg.png);
background-repeat: repeat;
margin-top: 14px;
height: 435px;
}
div.tabContainer div.current { display: block; }
div.tab p:last-child { margin-bottom: 0; }
</style>

Any suggestions or am I missing something in order to do what I need?

Thanks!

---

To hide all the divs of class="tab" you could just use CSS:

.tabContainer .tab { display: none; }

I'd also suggest amending your html mark-up to:

<ul class="tabNav">
    <li class="current"><a href="#tab1">Test 1</a></li>
    <li><a href="#tab2">Test 2</a></li>
    <li><a href="#tab3">Test 3</a></li>
    <li><a href="#tab4">Test 4</a></li>
    <li><a href="#tab5">Test 5</a></li>
</ul>

This uses #, which identifies a fragment/element in the same page, in place of ?. Though this is only because I find it easier to use the browser's in-built # functions along with CSS, rather than using jQuery (or a server-side script) to access the key/value pairs passed via the http 'GET' method.

To use the above with your current code it's easy to use jQuery to assign ids to the relevant elements:

$('.tabContainer > div.tab').each(
function(i) {
    this.id = 'tab' + (i + 1);
});

JS Fiddle demo of the above ideas.

---

I'd do something like this:

$('ul.tabNav a').click(function() {
  /* retrieves the index of the LI in the UL 
  This index should be the same than the corresponding item in .tabContainer */
  var curChildIndex = $(this).parents("ul").eq(0).find("li").index($(this).parent());
  /* We remove the class from all elements in tabContainer and tabNav */
  $(".tabNav,.tabContainer").find("li").removeClass('current');
  /* We add the class to the LI in which we clicked the link */
  $(this).parent().addClass("current");
  /* Here, I assume that your content in .tabContainer is in a DIV
    but you might want to change this */
  $(".tabContainer").find("div").eq(curChildIndex).addClass("current");
});