单击时隐藏 div 并显示另一个 div？答案

【问题标题】：Hide div on click and show another div?单击时隐藏 div 并显示另一个 div？
【发布时间】：2016-11-27 16:41:14
【问题描述】：

我有一个引导模式。该模式中有两个引导选项卡。 “工作”按钮是活动选项卡。 “雇用”按钮是另一个选项卡。这个模态包用这些样式的 .col-md-8 类

  @media (min-width: 992px) {
    .col-md-8 {
      width: 87%;
      margin-top: 37px;
      margin-bottom: 31px;
    }
  }

问题在于“雇用”标签内容的宽度高于“工作”内容。所以它正在寻找他的方式。

当有人点击“雇用”标签时，我需要显示“雇用”标签的原始宽度。我知道发生这种情况是因为我使用了 .col-md-8 类。没有任何选项可以在单击时隐藏该主类并显示“雇用”选项卡的原始宽度？我正在使用流星并做出反应。

【问题讨论】：

标签： html css twitter-bootstrap reactjs

【解决方案1】：

如果你想实现这一点，最好的方法是使用jquery。

您必须为工作、雇用按钮和工作内容和雇用内容提供 id。

例如

HTML：

<button id="work-btn">Work</button> <button id="hire-btn">Hire</button>
<div id="work-content"> The content goes here </div>
<div id="hire-content"> The content goes here </div>

CSS：

.hire-content {
 display:none; 
}

jquery：

$(document).ready(function(){
 $("#hire-btn").click(function() {
   $("#work-content").hide();
   $("#hire-content").show(); 
 });
});

希望这会有所帮助。如果您有任何疑问，请随时提出。

【讨论】：

【解决方案2】：

modal-dialog的宽度可以通过添加class来增加。你可以添加classmodal-lg。然后您可以在单击 Hire 选项卡时扩展模态的宽度。

【讨论】：

我不需要增加它的父元素的宽度。