标签不显示，除非点击

Tab not appearing unless clicked

本文关键字：显示标签更新时间：2023-09-26

我使用<select>元素来显示一个带有信息的容器。我使用JQuery显示选中的容器并隐藏其余部分。在容器中我有三个<div>元素。

测量单位:CM
测量单位为英寸。

用户可以通过单击不同的选项卡来选择要查看的度量单位。到目前为止，一切都很顺利。它确实显示所需的信息，但是，当我重新选择不同的大小，我不能看到任何标签信息，除非我点击其中一个。换句话说，重新创建问题:

选择大小
更改测量单位
重新选择大小
除非单击，否则任何选项卡都不会显示信息

为了更容易理解，我创建了JSFIDDLE。

有人可能有一个想法如何保持cm选项卡打开默认情况下，即使在大小被重新选择?

试试这个:它工作了。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();
});

我在输入复选框标签()中添加了一些新的类。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;
}

演示http://jsfiddle.net/a1jnLq49/