設置頁面加載/刷新時容器的默認內容，然後在點擊事件觸發後更改

Question

我想在頁面加載/刷新時設置容器的默認內容，以便在填充容器的單擊事件之前它看起來不是空的被解僱。

jQuery的我和看起來像這樣於

$(document).ready(function() { 
$('[class^="question"]').on('click', function(e){ 
e.preventDefault(); 
var numb = this.className.replace('question', ''); 
$('[id^="answer"]').hide(); 
$('#answer' + numb).show(); 
}); 

}); 

我的HTML妝看起來是這樣的：

<div class="new_member_box"> 
    <a href="#" class="question1"><h4>Vision</h4></a> 
</div> 

<div class="new_member_box_display" id="answer1"> 
    1 
</div> 

    <div class="new_member_box_display" id="answer"> 
    Default 
</div> 

在頁面加載時，默認的文本顯示，但是當我點擊展望鏈接，顯示1，然後默認顯示在下面的框中。我想要的是當頁面加載/刷新時默認顯示，然後當點擊鏈接時默認消失，然後顯示點擊鏈接的值。

Answer 1

還包括$('[id^="answer"]').hide(); DOM的準備..

$(document).ready(function(){ 
    $('[id^=answer]').not('#answer').hide(); //add this 
    //click function code 

}); 

Working jsFiddle

Answer 2

讓我們打破你的代碼：

$('[id^="answer"]').hide(); //This hids all the elements starting with answer as id 

$('#answer' + numb).show(); // and show a particular answer 

但在您的演示默認的內容框中有question作爲一個id

<div id="question" class="new_member_box_display"> 
    Text will appear here when one of the tabs above is clicked 
</div> 

所以你的腳本不會影響這部分。一個有效的解決方案是添加一個類來表示這個div作爲默認框。類似於

<div id="question" class="new_member_box_display default"> 
              <!-- ^I added a class here --> 
    Text will appear here when one of the tabs above is clicked 
</div> 

然後，在我們的腳本中，我們會先隱藏它。

$(function() { 
    $('[class^="question"]').on('click', function(e){ 
     e.preventDefault(); 
     var numb = this.className.replace('question', ''); 
     $('.default').hide(); // Lets hide that first 
     $('[id^="answer"]').hide(); 
     $('#answer' + numb).show(); 
    }); 
});