選項卡沒有出現，除非點擊

我正在使用<select>元素來顯示帶有信息的容器。使用JQuery我顯示選定的容器並隱藏其餘部分。在容器中我有三個<div>元素。選項卡沒有出現，除非點擊

說明
測量在CM
測量英寸。

用戶可以通過單擊不同的選項卡來選擇要查看的測量單位。到目前爲止，這一切都很好。它確實將信息顯示爲想要的，但是當我重新選擇不同的尺寸時，除非點擊其中一個，否則看不到任何標籤信息。換句話說重新創建問題：

選擇尺寸
更改計量單位
重新選擇尺寸
除非標籤的點擊沒有將顯示信息

爲了便於理解，我創建了JSFIDDLE。

有人可能有一個想法如何保持cm選項卡默認打開，即使大小被重新選擇後？

來源

2015-10-16 John

你想在默認情況下顯示的'centimeters'標籤？ –

@John如果你解決了這個問題，請將它添加到答案中，而不是更新問題。 –

@DrewGaynor似乎我無法解決它。 – John

我添加了一些新的類到輸入複選框標籤（·cm的範圍和.in分別）

<div class="d-tab"><input checked="checked" id="tab-6" class="cm" name="tab-group-2" type="radio" /> <label for="tab-6">&nbsp;Centimeters&nbsp;</label>

上的選擇大小進行選擇時我還增加了一個新的功能。該功能用於跟蹤哪個測量處於活動狀態。

$(".cm, .in").click(function(){ 
    $(".cm, .in").removeClass("active");  
    if($(this).hasClass("cm")){ 
     $(".cm").addClass("active"); 
    else 
     $(".in").addClass("active");    
});

最後，我調整了CSS來顯示工作狀態

[type=radio]:checked ~ label, 
.cm.active ~ label, 
.in.active ~ label{ 
    background: #dbd7d7; 
    z-index: 2; 
} 
[type=radio]:checked ~ label ~ .measurement-content, 
.cm.active ~ label ~ .measurement-content, 
.in.active ~ label ~ .measurement-content{ 
    z-index: 1; 
    opacity: 1; 
}

DEMO http://jsfiddle.net/a1jnLq49/

來源

2015-10-16 15:40:25 Lauwrentius

我想擁有cm目前我需要點擊其中一個來激活標籤 – John

啊，你只需要添加$（「.cm」）。addClass（「active」）; – Lauwrentius

哦，我把這兩行從css ** [type = radio]：checked〜label〜。測量內容，**和** [type = radio]：簽到〜標籤，** http://jsfiddle.net/o57kf2wd/ – Lauwrentius

試試這個：它的工作。 http://jsfiddle.net/realdeepak/yjaoccmb/2/

$(function() { 
    $('#community').change(function() { 
     var option = $(this).find('option:selected'); 

     var valuer = $(this).val(); 

     $("#tabs-" + valuer).prop('checked', true); 

     $('#size-single1').toggle(option.hasClass('show1')); 
     $('#size-single2').toggle(option.hasClass('show2')); 

    }).change(); 
});

來源

2015-10-16 15:02:52 RealDeepak

看來，這並沒有幫助。 – John

@John這將選擇您的單選按鈕的初始值。當您從下拉框中選擇值時。這樣的事情： $（'＃community'）。change（function（）{ $（'＃tab-4'）。prop（'checked'，true）; } – RealDeepak

它的工作唯一的問題是有一個ID分配給它，並且只會改變＃tab-4 – John

選項卡沒有出現，除非點擊

回答

相關問題