html - 单击时隐藏 div 并显示另一个 div？

Question

我有一个 Bootstrap 模式。该模式中有两个 Bootstrap 选项卡。 “工作”按钮是事件选项卡。 “雇用”按钮是另一个选项卡。这个模式用 .col-md-8 类包裹着这些样式

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

问题是“雇用”选项卡内容的宽度比“工作”内容的宽度高。所以它正在寻找他的方式。

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

Answer 1

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

你必须给 work、hire 按钮和 work-content 和 hire-content 提供 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; 
}

J查询:

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

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