how to add color on ListView when i Click in JqueryMobile

问题

hi i Tried add color on ListView When i Click i Have List View like :-

   <!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>

This code will Display listView but now i want When i click List Item(When I Click BMW) it should change to Green color and when click released it should get back to original color.

Please Give me any Idea

回答1:

You can create a class with the green background (plus darker green on hover if you like):

.activeLI .ui-btn {
    background-color: #CFF09E !important;
}
.activeLI .ui-btn:hover {
    background-color: #A8DBA8 !important;
}

Then handle the click event of the LI and simply toggle the class:

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

DEMO

NOTE: If you are using jQM 1.3 instead of the latest,

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

The background is applied directly to the LI and the background-image is used for gradients.

jQM 1.3 DEMO

回答2:

you should to add that

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

to remove all class and disable the last background

来源：https://stackoverflow.com/questions/23130546/how-to-add-color-on-listview-when-i-click-in-jquerymobile

标签

jquery

html

css

listview

jquery-mobile