javascript - 在页面加载/刷新时设置容器的默认内容然后在单击事件触发后更改

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> 

当页面加载时，会显示默认文本，但当我单击 Vision 链接时，会显示 1，然后在其下方的框中显示默认值。我想要的是默认值在页面加载/刷新时显示，然后在单击链接时默认值消失，然后显示单击链接的值。

Answer 1

还包括 $('[id^="answer"]').hide(); 在 dom 准备好..

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

});  

Working jsFiddle