javascript - 第二次单击时停止选项卡式元素关闭

Question

我有一段代码可以打开标签页，但我希望 1 个标签页始终保持打开状态。

如何禁止第二次单击已打开的选项卡按钮以阻止选项卡关闭？

所以引用fiddle，如果你点击'Button 1'一次，它会显示相应的标签，但是如果你再次点击'Button 1'它不应该关闭相应的标签。只有单击“按钮 2”才会关闭它并同时打开它自己的选项卡。

Fiddle

JS

$(document).ready(function() {
  $(".tone").click(function(e) {
    e.preventDefault();  
    var tab = $(this).attr("id");
    $(".tone__pack").not(tab).css("display", "none");
    $(tab).toggle();
  });
});

HTML

<div class="tone" id="#tone1">
  Button 1
</div>
<div class="tone__pack" id="tone1">

</div>
<div class="tone" id="#tone2">
  Button 2
</div>
<div class="tone__pack" id="tone2">

</div>

CSS

.tone {
  display: block;
  background: blue;
  width: 100px;
  text-align: center;
  color: #fff;
}

.tone__pack {
  display: none;
  width: 100px;
  height: 100px;
  background: red;
}

Answer 1

您可以使用 .show()而不是切换。

fiddle

$(document).ready(function() {
  $(".tone").click(function(e) {
    e.preventDefault();
    var tab = $(this).attr("id");
    $(".tone__pack").not(tab).css("display", "none");
    $(tab).show();
  });
});

.tone {
  display: block;
  background: blue;
  width: 100px;
  text-align: center;
  color: #fff;
}

.tone__pack {
  display: none;
  width: 100px;
  height: 100px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tone" id="#tone1">
  Button 1
</div>
<div class="tone__pack" id="tone1">

</div>
<div class="tone" id="#tone2">
  Button 2
</div>
<div class="tone__pack" id="tone2">

</div>