如何使用 jQuery 从 UL 获取所选项目？答案

【问题标题】：How to get the selected item from UL using jQuery?如何使用 jQuery 从 UL 获取所选项目？
【发布时间】：2010-03-20 20:55:20
【问题描述】：

我正在使用 Ul 和 Divs 创建一个选项卡控件。 Ul 用于显示标签标题。当用户选择一个选项卡（即“Li”）时，选项卡的背面颜色会相对于其他选项卡发生变化。

我想在 Ul 中获取 Selected 和未选择的 li。

我用过

 $(".tab li:selected").css("background-color","red");
 $(".tab li:deselected").css("background-color","white");

它不工作，我知道代码不工作。只是猜测。现在你可以理解我的问题了吧？

【问题讨论】：

标签： jquery

【解决方案1】：

当您的用户选择一个选项卡时，向该选项卡添加一个类来表示：

$('.tab li').click(function() {
    ... // your existing code
    $('.tab li').removeClass('selected'); // removes the "selected" class from all tabs
    $(this).addClass('selected'); // adds it to the one that's just been clicked
}

然后，在您的 CSS 中，您可以根据需要设置样式。

.tab li {
    background-color: white;
}

.tab li.selected {
    background-color: red;
}

【讨论】：

【解决方案2】：

当你选择一个标签时，你基本上点击它，所以你可以这样做：

 $('.tab li').click(function(){
   $(this).css("background-color","red");
   $(this).css("background-color","white");
 });

现在$(this) 指的是您选择的标签。

【讨论】：

【解决方案3】：

我会说：

$(".tab li").click(function() {
    $(".tab li").css("background-color", "white");
    $(this).css("background-color", "red");
});

编辑：:selected 选择器仅适用于可选项目，例如<option>s 内的<select>s。

【讨论】：