javascript - 在同一个位置显示div内容

Question

我对以下脚本有疑问，它在单击按钮时显示不同的 div 内容。问题是每当我单击按钮时，内容都会重新加载并将我带回页面顶部。有人可以告诉我应该怎么做才能保持“在同一个地方”并重新加载 div 内容吗？

---

编辑:非常感谢!下面的解决方案非常有效。我只是想问一下是否有任何简单的方法可以更改我当前选择的链接(显示内容)的样式？

你可以在这里查看 fiddle http://jsfiddle.net/PZnSb/6/

<div class="new_member_box">
  <a href="#" class="question1">
    <h4>Vision</h4>
  </a>
</div>

<div class="new_member_box">
  <a href="#" class="question2">
    <h4>History</h4>
  </a>
</div>

</div>
<div class="clear" class="question"></div>
<div id="answer1">
  1
</div>

<div id="answer2">
  2
</div>
<div class="new_member_box_display" id="question">
  Text will appear here when one of the tabs above is clicked
</div>


  $(document).ready(function() {
    $('.question1').click(function() {
      $('.new_member_box_display').html($('#answer1').html());
    }) $('.question2').click(function() {
      $('.new_member_box_display').html($('#answer2').html());
    })
  }); //end of ready

Answer 1

将href中的#替换为javascript:void

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

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

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

  $('.question4').click(function(){
    $('.new_member_box_display').html($('#answer4').html());
  });
	
});//end of ready

.new_member_box_display{
  min-height: 300px;
  height: auto;
  background-color: #e6ebe4; 
  padding: 20px;
  margin: 25px 0px 10px 0px;
  border-radius: 3px;
}


.content_areas_left_textbody{
  font-family: calibri;
  margin: 20px 0px 20px 0px;
  height: auto;
}

#answer1, #answer2, #answer3, #answer4{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="new_member_box">
  <a href="javascript:void" class="question1">
    <h4>Vision</h4>
  </a>
</div>  

<div class="new_member_box">
  <a href="javascript:void" class="question2">
    <h4>Church History</h4>
  </a>
</div>  

<div class="new_member_box">
  <a href="javascript:void" class="question3">
    <h4>Becoming a Member</h4>
  </a>
</div>  

<div class="new_member_box">
  <a href="javascript:void" class="question4">
    <h4>Pastor-in-Training</h4>
  </a>
</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>
</div>