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也没有听我说。

Answer 2

使用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 demo

但是没有看到你的JavaScript或UI的剩余部分。因此，您可能需要根据自己的需要进行定制。

修改jQuery以更好地满足您的需求，并展示CSS的使用：hover

$('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;
}

Revised JS Fiddle, using CSS :hover pseudo-element

或者，使用jQuery的hover()方法：

$('li').click(
    function(){
        $('.highlight').removeClass('highlight');
        $(this).addClass('highlight');
    });

$('li').hover(
    function(){
        $(this).addClass('highlight');
    },
    function(){
        $(this).removeClass('highlight');
    });

JS Fiddle demo, using the jQuery hover() method

参考文献：

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

2 个答案: