單擊鏈接時更改div中的內容

Question

單擊該框上方的鏈接時，我試圖更改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> 

Answer 1

load()使用ajax加載外部文件，而不是頁面上的元素。 您可能只是想隱藏和顯示元素：

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

小提琴

Answer 2

這是一個小提琴琴，可以滿足您的需求。 有更清潔的方法可以執行此操作，但這應該可行。 http://jsfiddle.net/PZnSb/6/

基本上，您希望將一個元素的內部html設置為另一個元素的內部html，如下所示：

$('.question1').click(function(){
    $('.new_member_box_display').html($('#answer1').html());
})

代替這個：

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

Answer 3

似乎您只是想單擊時更改文本，請嘗試此操作。

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

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

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

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

http://jsfiddle.net/cornelas/PZnSb/7/embedded/result/