javascript - 单击链接时更改 div 中的内容

Question

我试图在单击该框上方的链接时更改 div 内容框。我向各个按钮添加了点击功能，然后应显示包含该特定框内容的相应潜水。

当我将 jQuery 应用于页面时，内容不会根据点击的链接而改变，页面显示很尴尬。

这是 jsfiddle我正在工作。我正在使用的网页是 here .

我哪里出错了。

我目前使用的 jQuery 看起来像这样

$(document).ready(function() {
$('.question1').click(function(){
    $('.new_member_box_display').load('#answer1');
})

$('.question2').click(function(){
    $('.new_member_box_display').load('#answer2');
})

$('.question3').click(function(){
    $('.new_member_box_display').load('#answer3');
})

$('.question4').click(function(){
    $('.new_member_box_display').load('#answer4');
})

});//end of ready

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

 <div class="new_member_box">
                            <a href="#" class="question1"><h4>Vision</h4></a>
                        </div>  

                        <div class="new_member_box">
                            <a href="#" class="question2"><h4>Church History</h4></a>
                        </div>  

                        <div class="new_member_box">
                            <a href="#" class="question3"><h4>Becoming a Member</h4></a>
                        </div>  

                        <div class="new_member_box">
                            <a href="#" class="question4"><h4>Pastor-in-Training</h4></a>
                        </div> 
                    </div>
                    <div class="clear" class="question"></div>
                    <div  id="answer1">
                        1
                    </div> 

                    <div  id="answer2">
                        2
                    </div> 

                    <div  id="answer3">
                       3
                    </div> 

                    <div  id="answer4">
                        4
                    </div>   

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

Answer 1

load() 使用 ajax 加载外部文件，而不是页面上的元素。您可能只是想隐藏和显示元素:

$('[class^="question"]').on('click', function(e){
    e.preventDefault();
    var numb = this.className.replace('question', '');
    $('[id^="answer"]').hide();
    $('#answer' + numb).show();
});

FIDDLE