Divのコンテンツを表示するdivを非表示にする

Question

私は、メニューから選択した項目に従ってdivを表示/非表示するコードを探していました。私はこのコードを見つけましたが、最初からすべてのdivを隠していました。誰かがデフォルトで最初のオプションを表示するように変更する手助けをしてもらえますか？ここで

は私がビューを切り替えるしようとしましたが、あなたがすることによって表示する最初のオプションを使用する場合は、それは:)

var curPage=""; 
$("#menu a").click(function() { 
    if (curPage.length) { 
     $("#"+curPage).toggle(); 
    } 
    curPage=$(this).data("page"); 
    $("#"+curPage).toggle(); 
}); 

おかげ

Answer 1

を働いていないhttp://jsfiddle.net/dangoodspeed/M3ZhV/

を発見したバイオリンですデフォルト、これをトップに追加します（curPage）。

var curPage=""; 

if(!curPage){ 
    $('#page1').show() 
    curPage = "page1" 
} 

Answer 2

あなたの現在のコードのわずかな改正：

$(function() { 
$('#page1').show(); 
var curPage="page1"; 
    $("#menu a").click(function() { 
    if (curPage.length) { 
     $("#"+curPage).hide(); 
    } 
    curPage=$(this).data("page"); 
    $("#"+curPage).show(); 
    }); 
}); 

FIDDLE

Answer 3

使用この

$(function() { 
 

 
$("a[data-page^='page'").click(function() { 
 
$("div[id^='page']").hide(); 
 
\t var page=$(this).attr('data-page'); 
 
\t $("div[id='"+page+"']").show(); 
 
}); 
 
});

.content { display:none;} 
 
    .content:nth-child(1) 
 
    { 
 
     display:block; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 

 
    <div class="nav"> 
 
     <ul id="menu"> 
 
      <li id="link1"><a href="#" data-page="page1">Topic One</a> 
 
      </li> 
 
      <li id="link2"><a href="#" data-page="page2">Topic Two</a> 
 
      </li> 
 
      <li id="link3"><a href="#" data-page="page3">Topic Three</a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
    <div class="main"> 
 
     <div id="page1" class="content"> 
 
      <h1>Show Page1</h1> 
 

 
     </div> 
 
     <div id="page2" class="content"> 
 
      <h1>Show Page2</h1> 
 

 
     </div> 
 
     <div id="page3" class="content"> 
 
      <h1>Show Page3</h1> 
 
     </div> 
 
    </div>