如何在单击JqueryMobile时在ListView上添加颜色_Jquery_Html_Css_Listview_Jquery Mobile

如何在单击JqueryMobile时在ListView上添加颜色

jquery html css listview jquery-mobile

如何在单击JqueryMobile时在ListView上添加颜色,jquery,html,css,listview,jquery-mobile,Jquery,Html,Css,Listview,Jquery Mobile,嗨，我在单击时尝试在ListView上添加颜色我有如下列表视图：- <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.m

嗨，我在单击时尝试在ListView上添加颜色我有如下列表视图：-

   <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<style>


#aks:active {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

</style>

<body>
<div data-role="page" id="pageone">
<ul id="mylist" data-role="listview"  data-split-theme="c">

<li><a  id="aks" href="audi.html">mahindra Scorpio</a></li>
<li><a href="audi.html">BMW</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="audi.html">BenZ</a></li>

</ul>
</div>
</body>
<html>


#aks：活动{
内容：url（'http://dummyimage.com/100x100/eb00eb/fff');
}

这段代码将显示listView，但现在我想当我单击列表项（当我单击BMW时）时，它应该变为绿色，当单击released时，它应该恢复为原始颜色

请告诉我任何想法

您可以创建一个绿色背景的类（如果您愿意，在悬停时加上深绿色）：

然后处理LI的click事件并简单地切换类：

$(document).on("pagecreate", "#page1", function () {
    $("#mylist").on("click", "li", function(){        
        $(this).toggleClass("activeLI");
    });    
});

注意：如果您使用的是jQM 1.3而不是最新版本

.activeLI {
    background-color: #CFF09E !important;
    background-image: none;
}

背景直接应用于LI，背景图像用于渐变

你应该补充一点

$("#mylist").find("li").removeClass("activeLI");

要删除所有类并禁用最后一个后台

您尝试了什么？有JS代码吗？因为我们不会告诉你如何从头开始学习javascript。@gulty我更改了代码，使用了CSS样式，但我想更改颜色而不是图像“点击被释放”对你意味着什么？按下鼠标按钮，它会将颜色更改为绿色，然后释放鼠标（按下按钮），您想更改颜色以恢复正常吗？你不能用css来做这个。您必须检查jquery on click函数，最好是mouseup（）和mousedown（）。尝试推动它（您可以使用$（this）更改颜色以选择单击的元素）并更新代码。

$("#mylist").find("li").removeClass("activeLI");