点击隐藏div并显示另一个div？

Question

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

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

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

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

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

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

Answer 2

您可以通过添加class来增加模态对话框的宽度。您可以添加类 modal-lg 。然后，您可以在单击“雇佣”选项卡时展开模态的宽度。