Question

我有一个简单的表单，想通过改变它们的背景颜色突出显示聚焦标签，但jquery似乎在这里不起作用。控制台不显示任何错误。有人可以帮我这个吗？

<form action="" method="POST" id="qrForm">

    <label for="enter1">Enter<input id='enter1' type="radio" name="enter"></label>
    <label for="enter2">Exit<input id='enter2' type="radio" name="enter"></label><br>
    <label for="device1">Took a device<input id="device1" type="radio" name="device"></label>
    <label for="device2">Returned a device<input id="device2" type="radio" name="device"></label>
</form>

<script>
    $("label").focus(function(){
        $(this).css('background-color', '#00CC66');
    });
</script>

我实际上可以通过添加/删除课程来完成它，但我想知道为什么这个没有工作。

Answer 1

为什么在CSS中使用js时会使用js？

label:focus {
    background-color: #00cc66;
}

如果您希望tabindex=0元素可以调焦，您还想添加label，就像您单击标签，焦点将移至相关的input元素

或者，你可以使用css next兄弟选择器，如下所示：

HTML：

<input type="text" id="foo" class="foo"><label for="foo">label</label>

和css：

.foo:focus + label {
    background-color: #00cc66;
}

或使用不同的标记和CSS选择器

Answer 2

您无法使用.focus()为标签触发焦点，而是使用input进行，请点击此处

$("input").focus(function(){
    $('label').css('background', '#00CC66');
});

或

$("input").focus(function(){
    $(this).closest('label').css('background', '#00CC66');
});

Answer 3

试试这个，因为你不能在标签上使用焦点 -

function view(id){
    var html;
        $.ajax({
          url: "<?php echo site_url('admin/prescription/view_prescription_ajax') ?>/"+id,
          type: 'POST',
          dataType: 'html',
          success:function(data){
            html = data;
    $("#print_p").on("click", function(e){ printData(); });
          },
          async: false
        });
    $('#view .modal-body').html(html);
    $('#view').modal('show');
}

标签焦点不会改变css样式

3 个答案: