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 */