javascript - 如何在 bootstrap 的同一页面上为按钮单击替换 div 内容

Question

我喜欢通过在同一页面上单击 4 个不同的按钮来显示 div 内容，方法是替换或隐藏以前的按钮单击 div 内容...代码-

<div class="col-sm-3">
<div class="btn-group-vertical" style="padding-top:12px;">
      <button type="button" class="btn btn-warning" id="btn1">Btn1</button>
      <button type="button" class="btn btn-warning" id="btn2">Btn2</button>
      <button type="button" class="btn btn-warning" id="btn3">Btn3</button>
      <button type="button" class="btn btn-warning" id="btn4">Btn4</button>
</div>
</div>
<div id="content" class="col-sm-9">
  <div id="pilot" style="display:block;">
   <p>Name1</p>
   <h4>my name is A..........</h4>
  </div>
  <div id="design" style="display:block;">
   <p>Name2</p>
   <h4>my name is A..........</h4>
  </div>
  <div id="instrument" style="display:block;">
   <p>Name3</p>
   <h4>my name is A..........</h4>
  </div>
  <div id="innovations" style="display:block;">
   <p>Name4</p>
   <h4>my name is A..........</h4>
  </div>
</div>

我已经尝试了两个 jquery 脚本，但没有按照我的要求工作...脚本1-

$(document).ready(function(){
$("#btn1").click(function(){
    $("#design").css("display","none");
    $("#instrument").css("display","none");
    $("#innovations").css("display","none");
    $("#pilot").css("display","block");
    }

$("#btn2").click(function(){
    $("#pilot").css("display","none");
    $("#instrument").css("display","none");
    $("#innovations").css("display","none");
    $("#design").css("display","block");
    }

$("#btn3").click(function(){
    $("#design").css("display","none");
    $("#pilot").css("display","none");
    $("#innovations").css("display","none");
    $("#instrument").css("display","block");
    }

$("#btn4").click(function(){
    $("#design").css("display","none");
    $("#instrument").css("display","none");
    $("#pilot").css("display","none");
    $("#innovations").css("display","block");
    }
}

脚本2-

<script>        
$(document).ready(function(){
$("#btn1").click(function(){
    $("#design").replaceWith( $("#pilot").show() );
    $("#instrument").replaceWith( $("#pilot").show() );
    $("#innovations").replaceWith( $("#pilot").show() );
    }

$("#btn2").click(function(){
    $("#pilot").replaceWith( $("#design").show() );
    $("#instrument").replaceWith( $("#design").show() );
    $("#innovations").replaceWith( $("#design").show() );
    }

$("#btn3").click(function(){
    $("#design").replaceWith( $("#instrument").show() );
    $("#pilot").replaceWith( $("#instrument").show() );
    $("#innovations").replaceWith( $("#instrument").show() );
   }

$("#btn4").click(function(){
    $("#design").replaceWith( $("#innovations").show() );
    $("#instrument").replaceWith( $("#innovations").show() );
    $("#pilot").replaceWith( $("#innovations").show() );
    }
}
</script>

所以请给我一些合适的锻炼答案....如果可以使用 bootstrap scrollspy 那么也建议....tnx

Answer 1

您的第一个代码示例不起作用，因为您没有正确关闭大括号和方括号。这是一个工作版本:jsFiddle .您的第二个代码示例使用了完全错误的方法。

也就是说，通过使用 DRY 原则，您可以大大减少实现此目标所需的 JS 代码量。

首先，为您的.btn 元素添加一个data-* 属性，它可以用来标识div 当按钮被点击:

<button type="button" class="btn btn-warning" id="btn1" data-target="pilot">Btn1</button>
<button type="button" class="btn btn-warning" id="btn2" data-target="design">Btn2</button>
<button type="button" class="btn btn-warning" id="btn3" data-target="instrument">Btn3</button>
<button type="button" class="btn btn-warning" id="btn4" data-target="innovations">Btn4</button>

然后在您的 JS 代码中，您可以编写一个适用于所有按钮的单击处理程序:

$('.btn').click(function() {
    $('#content div').hide();
    var target = '#' + $(this).data('target');
    $(target).show();
})

Working example