gpt4 book ai didi

html - Jquery Mobile ListView 选定项 CSS 颜色

转载 作者:太空宇宙 更新时间:2023-11-03 18:53:04 24 4
gpt4 key购买 nike

我正在动态创建一个列表。我使用 onclick 事件调用 javascript 并且这有效,我不能做的是从列表中获取所选元素以具有不同的颜色。

这是代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>`enter code here`
<script src="scripts/jquery.js" type="text/javascript"></script>
<link href="stylesheets/jquery.mobile.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery.mobile.js" type="text/javascript"></script>
<script>

$(document).ready(function () {
var $al = $("#mylist");
$al.append("<li ><a id='a1' href=\"#\" rel=\"external\" onclick=\"test('selected test 1'); return false\">TEST 1</a></li>");
$al.append("<li ><a id='a2' href=\"#\" rel=\"external\" onclick=\"test('seleced test 2'); return false\">TEST 2</a></li>");
});

function test(text) {
$("#divtest").html(text);
}

$("#myList li a").click(function () {
$('#myList li > div').each(function (index) {
$(this).removeClass("ui-btn-active");
});
var p = $(this).parent();
$(p).addClass('ui-btn-active');
});

</script>
</head>
<body>
<div data-role="page" id="profile">
<div data-role="header" data-position="fixed">
</div>
<!-- /header -->
<div data-role="content">
<ul id="mylist" data-role="listview" data-inset="true">
</ul>
</div>
<div id='divtest'>

</div>
<!--/content-->
<div data-role="footer" data-position="fixed">
</div>
<!--/footer-->
</div>
</body>
</html>

最佳答案

为此,您需要从列表项中调用 .addClass 和 .removeClass。根据您想要的颜色,您将不得不删除/添加某些类。对于初学者,您可以将类 ui-btn-active 添加到元素中。

关于html - Jquery Mobile ListView 选定项 CSS 颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14345355/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com