javascript - 如何使用tab功能和jQuery专注于列表元素

我正在为客户制作问卷。他们希望关注的活跃问题的透明度为100％，而其他非活跃问题的透明度为20％。目前，我有页面加载，问题变暗到20％不透明度，第一个问题是100％。当我完成一个问题并跳至下一个问题时，该活动列表元素将保持20％的不透明度，直到我实际单击该列表元素和/或输入字段为止。如何使字段或列表元素处于活动状态并具有100％的不透明度。这是我到目前为止的内容：

<ul>

<li class="main" id="first-element" role="tab" data-toggle="tab">
    <div class="question">This is my first question</div>
    <input type="text" placeholder="First Answer">
</li>

<li class="main" role="tab" data-toggle="tab">
    <div class="question">Second Question</div>
    <input type="text" placeholder="Second Answer">
</li>

<li class="main" role="tab" data-toggle="tab">
    <div class="question">Third Question</div>
    <input type="text" placeholder="Third Answer">
</li>

</ul>

<script>

$(document).ready(function() {
    $('li.main').fadeTo(1000, 0.2);
    $('li#first-element').fadeTo(1000, 1.0);
});

$('li.main').click(function() {
    // Make all list elements (except this) transparent
    $('li.main').not(this).stop().animate({
        opacity: 0.2
    });
    // Make this opaque
    $(this).stop().animate({
        opacity: 1.0
    });
});

</script>

感谢您的帮助，这是JSFiddle上可行的解决方案：https://jsfiddle.net/urfwap4n/

最佳答案

我将keyup用于此问题，也许可以帮助您：

var hideshow = function(obj){
    $('li.main').not(obj).stop().animate({
        opacity: 0.2
    });
    // Make this opaque
    $(obj).stop().animate({
        opacity: 1.0
    });
}

$('li.main').click(function() {
    hideshow(this);
});

$('li.main').on('keyup',function(e){
    var code = e.keyCode || e.which;
    if(code == 9) { //Enter keycode
        hideshow(this);
    }
});

fiddle

关于javascript - 如何使用tab功能和jQuery专注于列表元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35042897/