如何使用tab功能和jQuery專注於列表元素

Question

我正在為客戶制作問卷。 他們希望關注的活躍問題的透明度為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/

Answer 1

您正在使用該功能

$('li.main').click(function() { ...

嘗試

$('li.main').on("focus", function() { ...

此外，與僅使用“焦點”功能相比，on函數還優化了內存使用情況

Answer 2

我使用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);
    } 
});

小提琴