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

});  

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