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

Setting default content of container when page loads/refresh then changes after click event fires

本文关键字：单击 然后 事件 加载 刷新 设置 默认      更新时间：2023-09-26

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

我正在使用的jQuery看起来像这样

$(document).ready(function() {
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answerswer"]').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="answerswer1">
    1
</div> 
  <div class="new_member_box_display" id="answerswer">
    Default
</div>

当页面加载时，显示默认文本，但是当我单击视觉链接时，显示1，然后默认显示在它下面的框中。我想要的是默认显示当页面加载/刷新，然后当一个链接被点击默认消失，然后为点击链接的值显示。

还包括$('[id^="answerswer"]').hide(); on dom ready. 

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

让我们来分解你的代码:

$('[id^="answerswer"]').hide(); //This hids all the elements starting with answer as id
$('#answer' + numb).show(); // and show a particular answer

但是在演示中默认的内容框的id是question 

<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^="answerswer"]').hide();
        $('#answer' + numb).show();
    });
});
相关文章：