我正在为一位客户制作问卷。他们希望关注的事件问题具有 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);
}
});
关于javascript - 如何使用 tab 函数和 jQuery 关注列表元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35042897/