5

我基本上li在单击时突出显示每个，并且希望li在单击其他地方或跳出（通过影响background-color属性）时“取消突出显示”单击的内容。

这种行为本质上是在模仿<select>它的突出显示行为......虽然我没有使用select，因为我想将 HTML 嵌套在列出的项目中——  你不能用<option>.

我正在尝试使用onblur，它不起作用......

这是HTML：

<ul id = "list">
    <li>asdf</li>
    <li>qwerty</li>
<ul>

...这是CSS： 
    #list {
        list-style-type: none;
    }

...这里是 jQuery/Javascript：

    function getEventTarget(e) {
        e = e || window.event;
        return e.target || e.srcElement; 
    }

    function highlightSelection(selection) {
        alert("It worked!");
        $(selection).css("background-color","#FFFF00");
    }

    // this function is not being triggered:
    function removeHighlight(selection) {
        $(selection).css("background-color","none");
    }

    var ul = document.getElementById("list");

    ul.onclick = function(event) {
        var target = getEventTarget(event);
        highlightSelection(target);
    };

    // this event is not working:
    ul.onblur = function(event) {
        var target = getEventTarget(event);
        removeHighlight(target);
    };
4

2 回答 2

2

lis 不会模糊，因为它们不聚焦。尝试使用mouseoutor mouseleave。

于 2013-07-15T20:40:32.623 回答
2

由于您已经在使用 JQuery ...

<ul id = "list">
     <li tabindex="1">asdf</li>
     <li tabindex="2">qwerty</li>
 <ul>


var ul = $("#list");
ul.on('click focus','li',function(){
    $(this)
        .css("background-color","#FFFF00")
        .siblings().css('background','');
}).on('blur','li',function(){
    $(this).css('background','');
});

http://jsfiddle.net/mc4tN/2/

当您离开列表项时，我不确定您想要什么效果......似乎您只想让它突出显示。tabindex您可以通过给它们一个属性来为您的列表项添加焦点能力。

于 2013-07-15T20:44:59.947 回答