如何使用jquery在单击按钮时显示特定容器

ecr0jaav 于 2021-09-13 发布在 Java

关注(0)|答案(2)|浏览(230)

我试图根据用户单击的按钮显示一个包含所有内容的容器。我有以下代码，但它不工作？我已经将jquery置于html页面上的脚本标记中。

$(document).ready(function() {
  $('#data1').click(function() {
    $('.all_info').show();
    $('.charts1').hide();
  });

  $('#data2').click(function() {
    $('.charts1').show();
    $('.all_info').hide();
  });
});

.all_info {
  display: none;
}

.charts1 {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
  <center>Results</center>
</h1>
<div class="data_btns_container">
  <div class="data_btns_group">
    <button type="button" class="data_btns_inside" id="data1">Data1</button>
    <button type="button" class="data_btns_inside" id="data2">Data2</button>
    <button type="button" class="data_btns_inside" id="data3">Data2</button>
  </div>
</div>
<div class="container-fluid all_info">
  <p>Test123</p>
</div>
<div class="container-fluid charts1">
  <canvas id="myChart" width="400" height="400"></canvas>
</div>

jquery JavaScript

来源：https://stackoverflow.com/questions/68489721/how-to-show-a-specific-container-on-button-click-with-jquery

2条答案

按热度按时间

wvmv3b1j1#

我不确定你到底在寻找什么，但我写了一些完全不同但结果相似的东西，只是想让你知道我认为你想要什么，以及如何实现它。看一看，让我知道。

//When a button is clicked
$('button').on('click',function(){
  //we get the name of the div that matches the data attribute of the button
  var div = $(this).data('name');
  //if that div is visible, we hide it
  if($('.'+div).hasClass('view-div')){
    $('.default').removeClass('view-div');  
  }else{
    //if the div was not visible we hide any div that might be and show this one
    $('.default').removeClass('view-div');
    $('.'+div).addClass('view-div');
  }
});

.default {
  border: 2px solid;
  margin-bottom: 15px;
  margin-top: 15px;
  padding: 15px;
  display: none;
}

.view-div {
  display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<div>
  <button data-name="div-1">Button 1</button>
  <button data-name="div-2">Button 2</button>
</div>

<div class="div-1 default">
  <h4>Div 1 Content</h4>
  <span>Some More!</span>
</div>
<div class="div-2 default">
  <h4>Div 2 Content</h4>
  <span>More Content</span>
</div>

如果你有任何问题，请告诉我。快乐编码！

赞(0）回复(0）举报 2021-09-13

oknwwptz2#

我应该提到我正在使用django，并且在我的项目中有一个“main.js”文件，该文件可以更改“all_info”容器中的元素，因此我没有将jquery代码放在html页面中的脚本标记中，而是将其放在“main.js”中才能工作。无论如何谢谢你的帮助。

赞(0）回复(0）举报 2021-09-13