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

Changing content in a div when a link is clicked

提问by Olubunmi

I am trying to change a div content box when a link above that box is clicked. I added a click function to the individual buttons then the corresponding dive containing the content for that particular box should be displayed.

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

When I apply the jQuery to the page, the content does not change according to the link that is clicked and the page displays awkwardly.

当我将 jQuery 应用到页面时，内容不会根据点击的链接而改变，页面显示笨拙。

This is the jsfiddleI'm working with. The webpage I'm working with is here.

这是我正在使用的jsfiddle。我正在使用的网页在这里。

Place where am i making the mistake.

我犯错的地方。

The jQuery I'm working with so far looks like this

到目前为止我正在使用的 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

The HTML I'm working with looks like this :

我正在使用的 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> 

回答by adeneo

load()loads an external file with ajax, not elements on your page. You're probably just trying to hide and show elements :

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

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

FIDDLE

小提琴

回答by bmceldowney

Here's a fiddle that does what I think you're looking to do. There are cleaner ways to do it, but this should work. http://jsfiddle.net/PZnSb/6/

这是一个小提琴，可以完成我认为您想要做的事情。有更干净的方法可以做到这一点，但这应该有效。 http://jsfiddle.net/PZnSb/6/

Basically you want to set the inner html of one element to the inner html of another, like this:

基本上，您想将一个元素的内部 html 设置为另一个元素的内部 html，如下所示：

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

instead of this:

而不是这个：

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

回答by Cam

It seems you just want the text to change when you click, try this.

似乎您只想在单击时更改文本，试试这个。

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

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