单击后如何保持列表元素突出显示?

| 这个问题是关于突出显示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有任何可能,请告诉我。 谢谢     
已邀请:
我在这里更改了您的演示: http://jsfiddle.net/XMbAS/2/ 编辑:这只是使用CSS类的简单明了的解决方案。首先,使用该类重置所有元素,然后将其添加到特定列表中的单击列表元素。 编辑:悬停演示包括: http://jsfiddle.net/balron/XMbAS/7/ 在我的脚本中,我仅添加和删除一个类,因此所有悬停定义仍然可以正常工作。毕竟,这一切都与CSS有关。很抱歉没有在您的代码上执行此操作,但是我放弃了尝试复制粘贴的操作。.SO确实缺少一些包含空格的复制。当我尝试修改您的示例时,jsfiddle也没有听我说。     
使用jQuery的最简单方法是:
$(\'a\').click(
    function(){
        $(\'.highlight\').removeClass(\'highlight\');
        $(this).closest(\'li\').addClass(\'highlight\');

        // I\'d use:
        // return false;
        // as well, but you\'ve addressed that already, in your inline onclick handlers.

    });
JS Fiddle演示。 但这没有看到您的JavaScript或UI的其余部分。因此,您可能必须根据自己的需要进行调整。 修改了jQuery以更好地满足您的需求,并展示了CSS的使用:悬停
$(\'li\').click(
    function(){
        $(\'.highlight\').removeClass(\'highlight\');
        $(this).addClass(\'highlight\');
    });
CSS:
li {
    background-color: #fff;
    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
    -o-transition: background-color 0.2s linear;
}

.highlight,
li:hover {
    background-color: #ffa;
    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
    -o-transition: background-color 0.2s linear;
}
使用CSS:hover伪元素修订了JS Fiddle 或者,使用jQuery的
hover()
方法:
$(\'li\').click(
    function(){
        $(\'.highlight\').removeClass(\'highlight\');
        $(this).addClass(\'highlight\');
    });

$(\'li\').hover(
    function(){
        $(this).addClass(\'highlight\');
    },
    function(){
        $(this).removeClass(\'highlight\');
    });
JS Fiddle演示,使用jQuery
hover()
方法。 参考文献:
hover()
addClass()
removeClass()
    

要回复问题请先登录注册