<!DOCTYPE html>
<html lang="en">
<head>
<Meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<div data-role="content" data-theme="d">
<div data-role="navbar" data-theme="d">
<ul>
<li><a href="#" data-icon="custom" class="ui-btn-active">Home</a></li>
<li><a href="#" data-icon="grid">Second page</a></li>
<li><a href="#" data-icon="star">Third page</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
我想要实现的是为导航栏中的当前活动选项卡设置一些样式,并更改所选选项卡的图标和背景(不同选项卡的图标将不同).
使用此CSS我可以定位活动选项卡
.ui-btn-active{
background:red !important;
}
但我希望单独定位每个标签,因为我需要为每个标签单独选择图标(或者,为了便于说明,我需要为每个标签选择不同的活动标签颜色：红色表示第一个,蓝色表示第二个,绿色表示第三个)
你可以在这里看到 – http://jsfiddle.net/8pwFK/
请让我知道如何实现这一点.谢谢
编辑：我面临的真正挑战是为我的自定义图标设置一个选定状态.这是我用于自定义图标的CSS：
.tab1 .ui-icon { background: url(icon1.png) 50% 50% no-repeat; background-size: 30px 30px; }
我想我需要以某种方式连接.ui-btn-active和.ui-icon才能工作.但是我无法弄清楚如何.
解决方法
实例：
> http://jsfiddle.net/phillpafford/8pwFK/4/
HTML：
<li><a href="#" data-icon="custom" class="ui-btn-active" id="custom-li-1">Home</a></li> <li><a href="#" data-icon="grid" id="custom-li-2">Second page</a></li> <li><a href="#" data-icon="star" id="custom-li-3">Third page</a></li>
CSS：
#custom-li-1.ui-btn-active {
background:green !important;
}
#custom-li-2.ui-btn-active {
background:red !important;
}
#custom-li-3.ui-btn-active {
background:blue !important;
}
自定义图标的文档：
> http://jquerymobile.com/demos/1.0b1/docs/buttons/buttons-icons.html
> http://jquerymobile.com/demos/1.0b1/docs/toolbars/docs-navbar.html
自定义图标
要使用自定义图标,请指定具有myapp-email等唯一名称的数据图标值,按钮插件将通过在ui-icon-前添加数据图标值并将其应用于按钮来生成类.然后,您可以编写一个CSS规则,该规则以ui-icon-myapp-email类为目标,以指定图标背景源.要保持视觉一致性,请创建一个18×18像素的白色图标,保存为具有Alpha透明度的PNG-8.
和
使用第三方图标集
您可以添加任何流行的图标库,如Glyphish,以实现iOS样式选项卡选项卡,其中大图标堆叠在文本标签上.所需要的只是一些自定义样式链接到图标并将它们放在导航栏中.以下是使用Glyphish图标和自定义样式(样式的查看页面源代码)的示例：
相关链接：
> A bottom navbar in jQuery mobile looking like iPhone navbar,possible?
> http://jsfiddle.net/vh4Ca/62/
更新：
以下是我认为您正在寻找的内容：
> http://jsfiddle.net/phillpafford/8pwFK/29/
JS：
$('#custom-li-1').click(function() {
$(this).attr('data-icon','star');
$(this).children().children().next().removeClass('ui-icon-custom').addClass('ui-icon-star');
}).page();
$('#custom-li-2').click(function() {
$(this).attr('data-icon','home');
$(this).children().children().next().removeClass('ui-icon-grid').addClass('ui-icon-home');
}).page();
$('#custom-li-3').click(function() {
$(this).attr('data-icon','grid');
$(this).children().children().next().removeClass('ui-icon-star').addClass('ui-icon-grid');
}).page();
