All geek questions in one place

Specify styles for the selected tab in the navigation bar

I have the following 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>

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

Using this CSS, I can target the active tab

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

But I want to target each tab separately, because for each tab I need to select separate selected icons (or, more simply, for the convenience of illustration) I need a different active tab color for each tab: red for the first, blue for the 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 task I ran into is to set the selected state for my custom icon. This is the CSS that 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 can’t figure out how to do this.

+3
source share
2 answers

Add an identifier to each element that you want to create like this: 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; }

Documents for custom icons:

Custom badges

To use custom icons, specify a data icon value that has a unique name, for example, myapp-email, and the button plugin will generate a class, the ui-icon icon data icon prefix and apply it to the button. Then you can write a CSS rule that is for the ui-icon-myapp-email class to indicate the background source of the icon. To maintain visual consistency, create an 18x18 pixel white icon saved as PNG-8 with alpha transparency.

and

Using third-party icons

You can add any of the popular icon libraries, such as Glyphish, to go to the iOS style tab tab, where large icons are placed on top of text labels. All that is required is a few custom styles for linking to the icons and their location in the navigation bar. Here is an example of using Glyphish icons and custom styles (viewing the page source for styles) in our navigator:

Related links:

UPDATE:

Here is what I think you are 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();
+2
source

Merge css classes.

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

Updated script:

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

+2
source

Source: https://habr.com/ru/post/894048/

More articles:


All Articles