jQueryの - これは私のHTMLコードです

Question

ページのロードにデフォルトとして最初のdivを表示：

<!-- Unordered list - navigation --> 
<ul id="linkwrapper"> 
    <li><a id="link1" href="#">link1</a></li> 
    <li><a id="link2" href="#">link2</a></li> 
    <li><a id="link3" href="#">link3</a></li> 
</ul> 

<!-- Hidden Elements--> 
<div id="infocontent"> 
    <div id="link1content">Information about 1.</div> 
    <div id="link2content">Information about 2.</div> 
    <div id="link3content">Information about 3.</div> 
</div> 

はJQuery：

$(document).ready(function(){ 

var $allContentDivs = $('#infocontent div').hide(); // Hide All Content Divs 

$('#linkwrapper a').click(function(){ 
    var $contentDiv = $("#" + this.id + "content"); 

    if($contentDiv.is(":visible")) { 
     $contentDiv.hide(); // Hide Div 
    } else {    
     $allContentDivs.hide(); // Hide All Divs 
     $contentDiv.show(); // Show Div 
    } 

    return false;   
    }); 
}); 

ページにロードするためのコードについて追加した場合。私は最初のリンクをクリックしてすでにスクリプトをロードするようにしたい。 「1に関する情報」を意味します。ページの読み込みに表示されます。 どうすればいいですか？

例ここ JS Fiddle

Answer 1

あなたはこれを試してみてください

var $allContentDivs = $('#infocontent div:not(:first-child)').hide(); 

あなたのセレクタを更新し、あなたのクリックイベント

$allContentDivs = $('#infocontent div'); 

Answer 2

の内側に再び$ allContentDivsを開始することによって、それを達成することができます：すべてのダイビングを隠します最初のコードを使用する以外は

（ '：最初の'）のように：

$('#infocontent div:not(:first)').hide();//hide all but first 
var $allContentDivs = $('#infocontent div');//get all divs 

JSfiddle Demo

Answer 3

だけ.NOTを追加

var $allContentDivs = $('#infocontent div').not(':first').hide(); 

Answer 4

var $allContentDivs = $('#infocontent div').hide(); 

$("#infocontent div").first().show(); 

Answer 5

どのようにすべてを隠し後の最初のdivを示してはどうですか？このよう

：

​​

Answer 6

更新あなたJSfiddle。それを確認します。 JQueryを使わなくてもこれを行うことができます。

$(document).ready(function(){ 

var $allContentDivs = $('#infocontent div') // Hide All Content Divs 

$('#linkwrapper li a').click(function(){ 
    var $contentDiv = $("#" + this.id + "content"); 

    if($contentDiv.is(":visible")) { 
     $contentDiv.hide(); // Hide Div 
    } else {    
     $allContentDivs.hide(); // Hide All Divs 
     $contentDiv.show(); // Show Div 
    } 

    return false;   
    }); 
}); 

あなたのCSS

.hide{ 
    display:none; 
} 
.show{ 
    display:inline 
} 

あなたのHTML：

<!-- Unordered list - navigation --> 

<ul id="linkwrapper"> 
    <li><a id="link1" class="show" href="#">link1</a></li> 
    <li><a id="link2" href="#">link2</a></li> 
    <li><a id="link3" href="#">link3</a></li> 
</ul> 

<!-- Hidden Elements--> 
<div id="infocontent"> 
    <div id="link1content" class="show">Information about 1.</div> 
    <div id="link2content" class="hide">Information about 2.</div> 
    <div id="link3content" class="hide">Information about 3.</div> 
</div> 

Answer 7

DEMO

$(document).ready(function(){ 

    var $allContentDivs = $('#infocontent div').hide(); // Hide All Content Divs 

    $('#linkwrapper a').click(function(){ 
     var $contentDiv = $("#" + this.id + "content"); 

     if($contentDiv.is(":visible")) { 
      $contentDiv.hide(); // Hide Div 
     } else {    
      $allContentDivs.hide(); // Hide All Divs 
      $contentDiv.show(); // Show Div 
     } 

     return false;   
    }); 

    $('#linkwrapper a').eq(0).click();//manually click the first anchor using .eq() 
}); 

はすべてを非表示にし、それが表示されるように、最初のリンクに手動でクリックを持っています