jqueryのタブ付きナビゲーションレイヤーを非表示にする方法

Question

jQueryを使用してページ上にドロップダウンコンテンツを配置する場所を開発中です。一番上のタブの1つをクリックすると、ウィンドウはコンテンツと共にドロップダウンします。私のジレンマは、訪問者がタブの1つをクリックするまで、これらのドロップダウンを隠す方法を考え出すことです。現在、タブ1または「テスト1」とマークされたタブは、ページがロードされたときを示します。リンクがクリックされるまでこれらのレイヤーを非表示にするにはどうすればいいですか？私はjqueryを理解する初心者ですが、Flashを使用せずにその機能と能力が大好きであることがわかりました。ドロップダウンのための

スクリプトは次のとおりです。

<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> 

ナビゲーションリンクとして設定されている：

<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> 

ここでは、タブのCSSです：

<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.tabContainer { 
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> 

任意の提案必要なことをするために何かが欠けていますか？

ありがとうございます！

Answer 1

は、あなただけのCSSを使用することができclass="tab"のすべてのdivを非表示にするには：

.tabContainer .TAB { 表示：なし; }

私もあなたのHTMLマークアップを改正ことをお勧めしたい：

<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> 

これは?の代わりに、同じページ内のフラグメント/要素を識別する、#を使用しています。これは、http 'GET'メソッドで渡されたキーと値のペアにアクセスするために、jQuery（またはサーバーサイドスクリプト）を使用するのではなく、ブラウザの組み込み関数#をCSSとともに使用する方が簡単だからです。

それは、関連する要素にid Sを割り当てるためのjQueryを使用するのは簡単です、あなたの現在のコードで上記を使用するには：

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

JS Fiddle demo of the above ideas。

Answer 2

私はこのような何かをしたい：

$('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"); 
});