Home/ Questions/Q 6139637
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T18:00:58+00:00

I have the following html code <!DOCTYPE html> <html lang=en> <head> <meta name=viewport content=width=device-width;

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 18×18 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();
    • 0