javascript - 如何在单击列表元素后保持突出显示？

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 类的简单直接的解决方案。首先，重置该类的所有元素，然后将其添加到特定列表中单击的列表元素。

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

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