javascript - how to replace div content for button click on same page in bootstrap - Stack Overflow

admin管理员组

文章数量:1395367

I like to show div content by 4 different button click on same page by replacing or hiding previous button click div content... code-

<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>

I have tried two jquery scripts but not worked as per my requirement... 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>

so please give me some suitable answer to workout ....if it is possible with bootstrap scrollspy then also suggest....tnx

I like to show div content by 4 different button click on same page by replacing or hiding previous button click div content... code-

<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>

I have tried two jquery scripts but not worked as per my requirement... 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>

so please give me some suitable answer to workout ....if it is possible with bootstrap scrollspy then also suggest....tnx

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Follow edited Jun 23, 2016 at 15:15 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Jun 23, 2016 at 15:13 ManojManoj 6911 gold badge33 silver badges1111 bronze badges 5

• Did you include jQuery library? – max Commented Jun 23, 2016 at 15:17
• yes....<script src="ajax.googleapis./ajax/libs/jquery/1.12.2/jquery.min.js"> – Manoj Commented Jun 23, 2016 at 15:20
• Your code doesn't work because you have to close your click events - after } you have to have );. Example: $("#btn1").click(function() { your code }); – max Commented Jun 23, 2016 at 15:22
• tnx dear....these silly mistakes really ruined me....as i am new to web development, this happened....ok my first script working nicely now...tnx 1ns again... – Manoj Commented Jun 23, 2016 at 15:37
• I remend you to code at codepen.io for example, you will be able to see JavaScript errors with ease. – max Commented Jun 23, 2016 at 15:40

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Your first code example doesn't work as you haven't closed the braces and brackets correctly. Here's a working version: jsFiddle. Your second code example is using an entirely wrong approach.

That being said, by using DRY principles you can massively reduce the amount of JS code required to achieve this.

Firstly, add a data-* attribute to your .btn elements which can be used to identify the div to be shown when the button is clicked:

<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>

Then in your JS code you can write a single click handler which works for all buttons:

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

Working example

Associate the target div's with the buttons using data-attributes. Now, on every click you can get the target value from that data-attribute and then use that to select only that div, that you need to show. You should hide all div's before showing the one that needs to be shown.

<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>

try this:

$('#btn1').click(function(){
     $("#content div").hide()
     $("#pilot").show()
});

 $('#btn2').click(function(){
     $("#content div").hide()
     $("#design").show()
});
 $('#btn3').click(function(){
     $("#content div").hide()
     $("#instrument").show()
});
 $('#btn4').click(function(){
     $("#content div").hide()
     $("#innovations").show()
});

here's a jsfiddle

本文标签： javascripthow to replace div content for button click on same page in bootstrapStack Overflow