Question

我喜欢通过替换或隐藏上一个按钮点击div内容，通过4个不同的按钮点击同一页面显示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脚本，但没有按照我的要求工作... SCRIPT1 -

$(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");
    }
}

SCRIPT2 -

<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代码量。

首先，在data-*元素中添加.btn属性，可用于标识点击按钮时显示的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

Answer 2

使用数据属性将目标div与按钮相关联。现在，在每次单击时，您都可以从该数据属性中获取目标值，然后使用该值仅选择您需要显示的div。在显示需要显示的div之前，您应该隐藏所有div。

<a id="btn1" href="#" data-target="design">button 1</a>
<a id="btn2" href="#" data-target="pilot">button 2</a>
<a id="btn3" href="#" data-target="instrument">button 3</a>

<div id="design-div" class="targetdivs">Design</div>
<div id="pilot-div" class="targetdivs">Pilot</div>
<div id="instrument-div" class="targetdivs">Instrument</div>


<script>
  $("#btn1, #btn2, #btn3").on("click", function(e){
    e.preventDefault();
    var target = $(this).data("target");
    $(".targetdivs").css("display", "none");
    $("#"+target+"-div").css("display", "block");
  });//click
</script>

Answer 3

试试这个：

first_item
firsno_H.pdb
firsh.pdb
second_item
secono_H.pdb
secoh.pdb

这是一个jsfiddle

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

3 个答案: