Question

我在下面的脚本中遇到问题，它在点击按钮时会显示不同的div内容。问题是每当我点击按钮时内容重新加载并将我带回页面顶部。有人可以告诉我应该做些什么来留在同一个地方＆＃39;并重新加载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

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>

Answer 2

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

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

call preventDefault
明确return false - 这是event.preventDefault()和event.stopPropagation()同时的快捷方式。

$('.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
})

更新了jsfiddle：http://jsfiddle.net/PZnSb/144/

在同一位置显示div内容

2 个答案: