Javascript 在同一位置显示div内容

我有以下脚本的问题，它显示不同的div内容时，点击按钮。问题是，每当我点击按钮时，内容就会重新加载并返回页面顶部。有人能告诉我，我应该怎么做才能“呆在同一个地方”，然后重新加载div内容吗

---

编辑：非常感谢！下面的解决方案非常有效。我只是想问一下，是否有任何简单的方法来更改我当前选择的链接（显示内容）的样式

你可以在这里查一查小提琴

1.
2.
单击上面的一个选项卡时，文本将显示在此处
$（文档）.ready（函数（）{
$（'.question1'）。单击（函数（）{
$（'.new_member_box_display'）.html（$（''answer1'）.html（））；
})$（'.question2'）。单击（函数（）{
$（'.new_member_box_display'）.html（$（'.#answer2'）.html（））；
})
}); //准备好了吗

将href中的

#

替换为

javascript:void

$（文档）.ready（函数（）{
$（'.question1'）。单击（函数（）{
$（'.new_member_box_display'）.html（$（''answer1'）.html（））；
});
$（'.question2'）。单击（函数（）{
$（'.new_member_box_display'）.html（$（'.#answer2'）.html（））；
});
$（'.question3'）。单击（函数（）{
$（'.new_member_box_display'）.html（$（'.#answer3'）.html（））；
});
$（'.question4'）。单击（函数（）{
$（'.new_member_box_display'）.html（$（'.#answer4'）.html（））；
});
});//准备就绪结束

。新建成员框显示{
最小高度：300px；
高度：自动；
背景色：#e6ebe4；
填充：20px；
利润率：25px 0px 10px 0px；
边界半径：3px；
}
.content\u区域\u left\u文本正文{
字体系列：calibri；
保证金：20px 0px 20px 0px；
高度：自动；
}
#回答1，#回答2，#回答3，#回答4{
显示：无；
}

1.
2.
3.
4.
单击上面的一个选项卡时，文本将显示在此处

替代解决方案不涉及HTML标记

为了防止单击事件的默认行为，jQuery提供了两个选项：

• 关于事件对象

• 从click handler显式返回false（错误）-这是同时用于

  事件.preventDefault（）

  和

  事件.StopperPagation（）

  的快捷方式

---

---

更新的JSFIDLE:

这对您更合适吗？同时重写一点代码，使其更具动态性我认为它工作正常，检查你的小提琴你的代码正常，只需松开href=#并更改按钮一的

标记…@CarstenLøvboAndersen谢谢，工作正常，我只是想知道是否有快速添加样式（颜色）的方法对于当前打开的链接？就我所知，这是完美的-它正在更新div内容，在我这方面没有任何有趣的滚动行为

<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

$('.question2').click(function(event){
    $('.new_member_box_display').html($('#answer2').html());
    event.preventDefault(); // first option
})

$('.question3').click(function(){
    $('.new_member_box_display').html($('#answer3').html());
    return false; // second option
})