指定导航栏中选定选项卡的样式答案

【问题标题】：Specifying the styles for the selected tab in a navbar指定导航栏中选定选项卡的样式
【发布时间】：2011-07-11 13:31:28
【问题描述】：

我有以下html代码

<!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 才能使其正常工作。但我无法弄清楚如何。

【问题讨论】：

标签： jquery html css jquery-mobile

【解决方案1】：

为每个你想用css设置样式的元素添加一个id：

现场示例：

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;
}

自定义图标文档：

自定义图标

要使用自定义图标，请指定一个具有唯一名称的 data-icon 值，例如 myapp-email，按钮插件将通过在 data-icon 值前面加上 ui-icon- 来生成一个类并将其应用于按钮。然后，您可以编写一个针对 ui-icon-myapp-email 类的 CSS 规则来指定图标背景源。为保持视觉一致性，请创建一个 18x18 像素的白色图标，另存为具有 alpha 透明度的 PNG-8。

和

使用第 3 方图标集

您可以添加任何流行的图标库（例如 Glyphish）来实现 iOS 样式的选项卡选项卡，该选项卡具有堆叠在文本标签顶部的大图标。所需要的只是一些自定义样式来链接到图标并将它们定位在导航栏中。这是在我们的导航栏中使用 Glyphish 图标和自定义样式（查看样式的页面源代码）的示例：

相关链接：

更新：

这就是我认为您正在寻找的东西：

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();

【讨论】：

谢谢..图标呢？.我使用的是自定义图标，我需要在其选定状态下显示图标。
更新了我的答案以帮助自定义图标
感谢您的回答。我已成功添加自定义图标。但我的挑战是，当我选择一个选项卡时，我需要更改该选项卡中的图标，以使图标具有“选中”的感觉.提前致谢
所以您需要在选择时将图标更改为新图标？

【解决方案2】：

组合 css 类。

HTML：

<li><a href="#" data-icon="custom" class="home ui-btn-active">Home</a></li>
<li><a href="#" data-icon="grid" class="two">Second page</a></li>
<li><a href="#" data-icon="star" class="three">Third page</a></li>

CSS：

.home.ui-btn-active {
    background:red !important;
}
.two.ui-btn-active {
    background:green !important;
}
.three.ui-btn-active {
    background:blue !important;
}

更新小提琴：

http://jsfiddle.net/8pwFK/3/

【讨论】：

谢谢..图标呢？.我使用的是自定义图标，我需要在其选定状态下显示图标。
只需将图标引用添加到上面@Guest 显示的样式中（提示：attr(data-icon)）。