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

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

问题描述

我有以下html代码

 <！DOCTYPE html& 
< html lang =en> 
< head> 
< meta name =viewportcontent =width = device-width; initial-scale = 1.0/> 
< link rel =stylesheethref =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 =pageid =home> 
< div data-role =headerdata-theme =b> 
< h1>测试< / h1> 
< / div> 
< div data-role =contentdata-theme =d> 
< div data-role =navbardata-theme =d> 
< ul> 
< li>< a href =＃data-icon =customclass =ui-btn-active>首页< / a>< / li& 
< li>< a href =＃data-icon =grid>第二页< / a>< / li> 
< li>< a href =＃data-icon =star>第三页< / 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 为这个工作。但我不能弄清楚如何。

解决方案

使用css：

为每个要创建样式的元素添加一个id



>



HTML：

 < li>< a href =＃data-icon =customclass =ui-btn-activeid =custom-li-1> ; Home< / a>< / li> 
< li>< a href =＃data-icon =gridid =custom-li-2>第二页< / a>< / li& 
< li>< a href =＃data-icon =starid =custom-li-3>第三页< / a>< / li&

CSS：

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

自定义图标的文档：





自定义图标



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



和



使用第三方图标集



您可以添加任何流行的图标库，例如Glyphish，以实现iOS风格的标签页，其中有大图标堆叠在文本标签。所需要的是一些自定义样式链接到图标，并将其放置在导航栏中。下面是一个在导航栏中使用Glyphish图标和自定义样式（查看样式的页面源代码）的示例：



相关链接：





更新：



这是我想要的：





JS：

  $（'＃custom-li-1' ）.click（function（）{
 $（this）.attr（'data-icon'，'star'）; 
 $（this）.children .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天全站免登陆