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

我试图在页面加载/刷新时设置容器的默认内容，以便在触发填充容器的click事件之前容器不会看起来是空的

我正在使用的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.
违约

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

还包括

$（'[id^=“answer”]'）。hide（）就绪

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

});  

让我们来分析一下您的代码：

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

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

但是演示中的默认内容框中有
问题
作为id

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

@约瑟夫德雷默请看更新。谢谢。你的代码应该可以运行了，你能演示一下吗？@Starx当我点击其中一个链接时，两个框出现了。我试过了，但没有成功。当我单击链接时，相应的文本不显示，页面跳转到顶部。默认文本应首先显示，然后单击任何链接时，默认文本将消失，并显示所单击链接的文本。@Olubunmi，您已删除
$（document）。ready（）
像以前一样放置
<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();
    });
});