如何保持列表元素点击后突出显示？

Question

这个问题是关于ListItems的突出显示.

我通过使用以下类突出显示列表项.

ul.category_list li {
  background: none repeat scroll 0 0 #B73737;
  border-bottom: 1px solid #CCCCCC;
  color: #953131;
  display: block;
  height: 29px;
  width: 242px;
}

ul.category_list li a:link,ul.category_list a:visited { 
        display: block; width: 227px; height: 18px; padding: 5px 0 6px 15px;
        background: #fff; text-decoration: none; color: #666; }

    ul.category_list li a:hover { 
        display: block; width: 227px; height: 18px; padding: 5px 0 6px 15px;
        background: #e5e5e5 url(../images/disc_apps/nav_over.jpg) no-repeat; text-decoration: none; color: #666; }

    ul.category_list li a:active { 
        display: block; width: 227px; height: 18px; padding: 5px 0 6px 15px;
        background: #e5e5e5; text-decoration: none; color: #666;  }

请参考http://jsfiddle.net/XMbAS/上的这个工作示例

现在,我希望如此,点击的元素应保持高亮显示,除非我点击其他元素.目前它没有发生.请帮帮我.如果jquery有任何可能,请告诉我.

谢谢

Answer 1

我在这里改变了你的演示:

http://jsfiddle.net/XMbAS/2/

编辑:这只是一个使用CSS类的简单直接的解决方案.首先,重置该类的所有元素,然后将其添加到特定列表中的clicked list元素.

编辑:包含鼠标的演示:http :
//jsfiddle.net/balron/XMbAS/7/

在我的脚本中,我只添加和删除一个类,因此所有悬停定义仍然可以正常工作.毕竟这一切都与CSS有关.很抱歉没有在您的代码上执行此操作,但我放弃了尝试复制粘贴..所以实际上缺少一些包含空格的副本.当我试图修改你的例子时,jsfiddle也没有听我的.