jQuery颜色更改或CSS？

Question

我试过实现一个特定的领域悬停/选定的颜色变化，但我想jQuery是答案。我已经看过一些按钮点击教程，但也许我不只是看到它或正确地做。

这里的想法是，当用户将鼠标悬停在标题，背景颜色的变化，当他们点击标题将其展开，背景颜色保持不变（选择），但因为它代表现在的背景颜色扩展字段不会更改。

以下是演示： http://www.notedls.com/demo

Answer 1

我看到你的JQuery单击时选定的类添加到您的li元素。根据你想要做什么，你可以给li.selected背景颜色着色，或者根据li.selected元素来定位div。

ul#acc1 li.selected { 
    background-color: #xxxxxx; 
} 

ul#acc1 li.selected div { 
    background-color: #xxxxxx; 
} 

Answer 2

使用jQuery添加/删除设置样式的类。这将使css与代码保持分离，这是一个更好的解决方案，尤其是在涉及设计人员的情况下。

Answer 3

由于可访问性的原因，这些应该创建为列表中的一组< a>标签。这是因为屏幕阅读器/键盘选项卡将停止在超链接上。

然后，您可以使用伪类（状态），如在CSS悬停，这样即使脚本被禁用，这将工作。

a:link {background-colorr:#FF0000;}  /* unvisited link */ 
a:visited {background-color:#00FF00;} /* visited link */ 
a:hover {background-color:#FF00FF;} /* mouse over link */ 
a:active {background-color:#0000FF;} /* selected link */