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

我試圖在單擊該框上方的鏈接時更改div內容框。我爲各個按鈕添加了點擊功能，然後顯示包含該特定框的內容的相應潛水。單擊鏈接時更改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>

來源

2013-05-06 Olubunmi

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

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

FIDDLE

來源

2013-05-06 21:12:56 adeneo

感謝這個答案，我嘗試過，但沒有奏效。當我點擊按鈕時，div框的內容沒有改變。 – Olubunmi 2013-05-06 21:22:13

@Olubunmi - 它有點不清楚你打算做什麼，但我添加了一個小提琴來演示它的工作？ – adeneo 2013-05-06 21:26:14

謝謝。還有一件事：當頁面加載/刷新時，如何在div框中設置默認文本？ – Olubunmi 2013-05-06 22:15:50

這裏有一個小提琴，做什麼，我認爲你正在尋找做。有更乾淨的方法來做到這一點，但這應該起作用。 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'); 
})

來源

2013-05-06 21:32:22 bmceldowney

看來你只是想點擊時要更改的文字，試試這個。

$(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/

來源

2013-05-06 21:52:23 Cam

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

回答

相關問題