Question

我正在使用Ul和Div创建一个制表符控件。 UI用于显示标签头。当用户选择一个Tab（即'Li'）时，标签背面的颜色会相对于其他标签更改。

我希望在那个Ul中获得选定而未选择的li。

我用过

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

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

Answer 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;
}

Answer 2

当您选择标签时，基本上点击，这样您就可以这样做：

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

现在$(this)引用您选择的标签。

Answer 3

我会说：

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

修改：:selected选择器仅适用于可选项，例如<option>内的<select>。

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

3 个答案: