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

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(); 
    }); 
});