停止選項卡式元素關閉第二次點擊

Question

我有打開選項卡的代碼片段，但是我希望1選項卡始終保持打開狀態。

如何禁用第二次點擊標籤按鈕已經打開停止關閉標籤？

所以參考小提琴，如果你點擊'按鈕1'一次，它會顯示相應的標籤，但是如果再次點擊'按鈕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>

Answer 2

撥動它，只有當它的包裝是隱藏的，就像這樣：

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

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

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