指定导航栏中所选选项卡的样式 [英] Specifying the styles for the selected tab in a navbar

查看：33
本文介绍了指定导航栏中所选选项卡的样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下 html 代码

<html lang="zh-cn"><头><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><身体><div data-role="page" id="home"><div data-role="header" data-theme="b"><h1>测试</h1>

<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">首页</a></li><li><a href="#" data-icon="grid">第二页</a></li><li><a href="#" data-icon="star">第三页</a></li>

我想要实现的是为导航栏中当前活动的选项卡设置一些样式并更改所选选项卡的图标和背景(不同选项卡的图标会有所不同).

使用这个 CSS 我可以定位活动标签

.ui-btn-active{背景:红色！重要；}

但我想分别定位每个标签，因为我需要为每个标签单独选择图标(或者，为了便于说明，我需要为每个标签使用不同的活动标签颜色:<强>红色为第一，蓝色为第二，绿色为第三)

你可以在这里看到它 - http://jsfiddle.net/8pwFK/

请让我知道如何实现这一点.提前致谢

我面临的真正挑战是为我的自定义图标设置选中状态.这是我用于自定义图标的 CSS:

.tab1 .ui-icon { background: url(icon1.png) 50% 50% no-repeat;背景尺寸:30px 30px；}

我想我需要以某种方式连接 .ui-btn-active 和 .ui-icon 才能工作.但我不知道怎么做.

解决方案

为每个要使用 css 设置样式的元素添加一个 id:

现场示例:

HTML:

  • 首页
    • <li><a href="#" data-icon="grid" id="custom-li-2">第二页</a></li><li><a href="#" data-icon="star" id="custom-li-3">第三页</a></li>

    CSS:

    #custom-li-1.ui-btn-active {背景:绿色！重要；}#custom-li-2.ui-btn-active {背景:红色！重要；}#custom-li-3.ui-btn-active {背景:蓝色！重要；}

    自定义图标文档:

    自定义图标

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

    和

    使用第 3 方图标集

    您可以添加任何流行的图标库(如 Glyphish)来实现 iOS 风格的选项卡选项卡，该选项卡在文本标签顶部堆叠有大图标.所需要的只是一些自定义样式来链接到图标并将它们放置在导航栏中.以下是在导航栏中使用 Glyphish 图标和自定义样式(查看样式的页面源)的示例:

    相关链接:

    更新:

    这是我认为您正在寻找的内容:

    JS:

    $('#custom-li-1').click(function() {$(this).attr('data-icon','star');$(this).children().children().next().removeClass('ui-icon-custom').addClass('ui-icon-star');}).页();$('#custom-li-2').click(function() {$(this).attr('data-icon','home');$(this).children().children().next().removeClass('ui-icon-grid').addClass('ui-icon-home');}).页();$('#custom-li-3').click(function() {$(this).attr('data-icon','grid');$(this).children().children().next().removeClass('ui-icon-star').addClass('ui-icon-grid');}).页();

    I have the following html code

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

    What I want to achieve is to set some styles for the currently active tab in the navbar and change the icon and background for the selected tab(icon will be different for different tabs).

    Using this CSS I can target the active tab

    .ui-btn-active{
    background:red !important;
}

    But I want to target each tabs separately because I need separate selected icons for each tab(Or lets say,for ease of illustration purpose-I need a different active tab color for each tab:red for first,blue for second,green for third)

    You can see it here - http://jsfiddle.net/8pwFK/

    Please let me know how to achieve this.Thanks in advance

    Edit:The real challenge I am facing is setting a selected state for my custom icon.This is the CSS I use for the custom icon:

    .tab1 .ui-icon { background:  url(icon1.png) 50% 50% no-repeat; background-size: 30px 30px; }

    I think I need to somehow connect .ui-btn-active and .ui-icon for this to work.But I am not able to figure out how.

    解决方案

    Add a id to each element you want to style like so with css:

    Live Example:

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

    Docs for Custom Icons:

    Custom Icons

    To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.

    and

    Using 3rd party icon sets

    You can add any of the popular icon libraries like Glyphish to achieve the iOS style tab tab that has large icons stacked on top of text labels. All that is required is a bit of custom styles to link to the icons and position them in the navbar. Here is an example using Glyphish icons and custom styles (view page source for styles) in our navbar:

    Related Links:

    UPDATE:

    Here is the what I think you're looking for:

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

    这篇关于指定导航栏中所选选项卡的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

    查看全文
    相关文章
    前端开发最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆