Question

我想要做的是当我点击任何一个li元素它应该改变颜色。问题是，当我把一个：活动它适用于Android 4.0及更高版本，但它不适用于Android 2.3及更低版本.I不知道问题是什么。当我按下它时，有什么替代方法可以改变li的背景颜色吗？

HTML：

<div id="nav">
<ul id="navigation">
<li><a href="#">Requirements</a></li>
<li><a href="#">Release dates</a></li>
<li><a href="#">Game Plot</a></li>
<li><a href="#">Game Review</a></li>
<li><a href="#">About</a> </li>
<li><a href="#">About</a> </li>
</ul>

CSS：

#navigation a:active
{color:pink;
background-color:#FF5C33;
}

注意： a：悬停适用于Android 2.3及以下版本。

Answer 1

您可以使用javascript为您执行此操作，而不是依赖伪选择器。

将您的CSS更改为此...

#navigation a.active {
    color:pink;
    background-color:#FF5C33;
}

并添加此javascript ...

$(function() {
    $("#navigation a").on("mousedown", function() {
        $(this).addClass("active");
    }).on("mouseup", function() {
        $(this).removeClass("active");
    });
});

这应该适用于早期版本的Android，它将使用旧版本的WebView。

Answer 2

使用来自@Archer答案的灵感，您可以使用javascript：

$(function() {
    $("#navigation a").on("mousedown mouseup", function() {
         $(this).toggleClass("active");
    });
});

jsFiddle

a：主动不在phonegap上工作

2 个答案: