单击链接时更改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中的内容

回答

相关问题