如何使用 jquery 突出显示选定的列表项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15301356/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I highlight a selected list item with jquery?
提问by Paul
I have several items in a list and want to highlight the one a user clicks on by applying some css style, maybe a background color etc.
我在列表中有几个项目，并希望通过应用一些 css 样式（可能是背景颜色等）来突出显示用户单击的项目。
My HTML looks like this:
我的 HTML 如下所示：
<ul class="thumbnails">
<li>
<a href="#" class="thumbnail">
<img class="giftthumb" src='thumb1.jpg' alt="">
<span class="gifttitle">Thumb1</span>
</a>
</li>
<li>
<a href="#" class="thumbnail">
<img class="giftthumb" src='thumb2.jpg' alt="">
<span class="gifttitle">Thumb3</span>
</a>
</li>
<li>
<a href="#" class="thumbnail">
<img class="giftthumb" src='thumb3.jpg' alt="">
<span class="gifttitle">Thumb3</span>
</a>
</li>
</ul>
jQUery to retrieve selected item:
jQUEry 检索所选项目：
$('.thumbnail').click(function(e) {
e.preventDefault();
???
})
回答by kapa
You could use jQuery's class management methods(namely addClass()and removeClass()in this case) to add a class on the selected item and remove the same class from all the other items (if you want only one selected at a time).
您可以使用 jQuery 的类管理方法（即addClass()，removeClass()在本例中）在所选项目上添加一个类，并从所有其他项目中删除相同的类（如果您一次只希望选择一个）。
//save class name so it can be reused easily
//if I want to change it, I have to change it one place
var classHighlight = 'highlight';
//.click() will return the result of $('.thumbnail')
//I save it for future reference so I don't have to query the DOM again
var $thumbs = $('.thumbnail').click(function(e) {
e.preventDefault();
//run removeClass on every element
//if the elements are not static, you might want to rerun $('.thumbnail')
//instead of the saved $thumbs
$thumbs.removeClass(classHighlight);
//add the class to the currently clicked element (this)
$(this).addClass(classHighlight);
});
Then in your CSS just add:
然后在你的 CSS 中添加：
.highlight {
background-color: cyan;
font-weight: bold;
}
This is a better solution than changing CSS properties directly from jQuery/Javascript (with the .css()method for example), because separation of concerns will make your code more manageable and readable.
这是比直接从 jQuery/Javascript 更改 CSS 属性（.css()例如使用方法）更好的解决方案，因为关注点分离将使您的代码更易于管理和可读。
回答by karaxuna
$('.thumbnail').click(function(e) {
e.preventDefault();
$(this).css('background-color', 'red');
})
回答by Kon
Your ??? would be:
您的 ？？？将是：
$('.thumbnail').removeClass('selected');
$(this).addClass('selected');
Then all you have to do is define your 'selected' css class.
然后您所要做的就是定义您的“选定”css 类。
回答by Roko C. Buljan
If you don'tneed the activeto be persistenthere's a CSS way:
如果你没有需要主动将持续这里有一个CSS方式：
li:focus{
background: red;
}
li:active{
background: gold;
}<ul>
<li tabindex="1">Item 1</li>
<li tabindex="1">Item 2</li>
<li tabindex="1">Item 3</li>
</ul>
Now click <b>here</b> and see why it's not persistent.in some situations the above might be useful - to only highlight the currently "click-active" item…
在某些情况下，上述内容可能很有用 - 仅突出显示当前“点击活动”项目......
