当单击该框上方的链接时,我正在尝试更改 div 内容框。我为各个按钮添加了一个单击功能,然后应显示包含该特定框内容的相应潜水。
当我将 jQuery 应用于页面时,内容不会根据单击的链接而改变,并且页面显示很尴尬。
这是我正在使用的jsfiddle 。我正在使用的网页在这里。
我在哪里犯错误。
到目前为止,我正在使用的 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>