选项卡没有出现，除非点击

我正在使用<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

选项卡没有出现，除非点击

回答

相关问题