Question

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

如何禁用已经打开的选项卡按钮上的第二次单击停止关闭选项卡？

所以，如果你点击按钮1＆＃39;那么请参考小提琴。一次，它会显示相应的标签，但如果您点击按钮1＆＃39;再次它不应该关闭相应的选项卡。只需点击按钮2＆＃39;将关闭它也打开它自己的标签。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

仅在隐藏包装时才切换它，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

我修改了你的代码，

当打开选项卡时，我将添加一个类来识别它已经打开。

再次检测到点击事件时，如果已经包含该类，则不会执行任何操作，否则我将按要求执行。

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

        // removing class, if it is present in any other tab
        $(".tone__pack").not(tab).removeClass("active");

        //if it is already opened, then return
        if($(tab).hasClass("active")){
            return;
        }
        //add identifier for next iterations
        $(tab).addClass("active");

        $(tab).toggle();
      });
    });

停止选项卡元素在第二次单击时关闭

3 个答案: