jQuery Accordion中的选定状态

Question

我只是以其基本形式使用jQuery手风琴。在我的生活中，我不能在这件事中找到所选的班级。我基本上只想做一些css，如：

#accordion h2 a.selected {
color: #000;
}

因此，当您的一个项目被选中或处于活动状态时，标题链接会保持黑色

我知道这很简单，而且我已经用其他东西完成了，我只是在手风琴的文档中有点迷失。这是一个不同的类吗？我需要首先添加它吗？

$(document).ready(function() {
    $( "#accordion" ).accordion({
    autoHeight: false,
    navigation: true,
    header: 'h2'
    });
});

感谢。

Answer 1

Chrome的Inspector可以节省一天的时间！

以下是我找到的课程：

ui-accordion-header ui-helper-reset ui-state-active ui-corner-top

我猜这应该这样做：

.ui-state-active a {
  ...
}

Answer 2

尝试以下CSS

.ui-state-active a { color: #000;}

如果不起作用，请尝试使其更具体一些。

Answer 3

我的猜测是，您不仅使用this jQuery accordion，还使用其中一个jQuery UI主题... like this one。

如果我们看一下350行，我们会看到这条规则设置了CSS color属性：

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: #212121/*{fcActive}*/;
    text-decoration: none;
}

让我们做一些数学和calculate that selector's specificity：

• 是否属于style属性：？ 0
• ID选择器的数量？ 0
• 属性和伪类的数量？ 5
• 元素名称的数量？ 3

...所以你的新规则必须比0,0,5,3更具体。简单的方法：添加一个id选择器：

#accordion .ui-state-active a { /* 0, 1, 1, 1 > 0, 0, 5, 3 */ } 

查看JsFiddle demo。