Question

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

描述
CM中的测量
以英寸为单位的测量。

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

选择尺寸
更改测量单位
重新选择尺寸
除非点击，否则所有标签都不会显示信息

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

即使在重新选择尺寸后，有人可能知道如何默认打开cm标签吗？

Answer 1

试试这个：它的工作原理。 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();
});

Answer 2

我在输入复选框标签（分别为.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/

除非单击，否则不会显示选项卡

2 个答案: