I am working on a questionnaire for a client. They want the active question that is on focus to be at 100% opacity while the other inactive questions are at 20% opacity. Currently I have the page load, the questions dim to 20% opacity and the first question is at 100%. When I am done with a question and tab to the next question, that active list element stays at 20% opacity until I actually click the list element and/or the input field. How do I make the field or list element active and 100% opacity. Here is what I have so far:
我正在为客户制作调查问卷。他们希望焦点上的活跃问题是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>
Here is a working solution on JSFiddle thanks to your help: https://jsfiddle.net/urfwap4n/
以下是JSFiddle的工作解决方案,感谢您的帮助:https://jsfiddle.net/urfwap4n/
2 个解决方案
#1
1
I use keyup
for this issue, maybe help you:
我使用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);
}
});
#2
1
You are using the function
您正在使用该功能
$('li.main').click(function() { ...
try
$('li.main').on("focus", function() { ...
Also the on function optimised memory usage better than just using the "focus" function
此外,on函数优化了内存使用,而不仅仅是使用“焦点”功能
#1
1
I use keyup
for this issue, maybe help you:
我使用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);
}
});
#2
1
You are using the function
您正在使用该功能
$('li.main').click(function() { ...
try
$('li.main').on("focus", function() { ...
Also the on function optimised memory usage better than just using the "focus" function
此外,on函数优化了内存使用,而不仅仅是使用“焦点”功能