jQuery Mobile Active Nav Item - jquery-mobile

Question

I'm trying to style the current/active nav for each page and it's just not working. I am at a loss here. Any help would be greatly appreciated. I am only using one nav for all five "pages" (I prefer the content/"page" to slide while the nav persists).
Here's my .js
if ($.mobile.activePage.attr("id") == "home") {
$('#home_').addClass('.activeNav');
}
if ($.mobile.activePage.attr("id") == "solutions") {
$('#solutions_').addClass('.activeNav');
}
if ($.mobile.activePage.attr("id") == "pension") {
$('#pension_').addClass('.activeNav');
}
if ($.mobile.activePage.attr("id") == "team") {
$('#team_').addClass('.activeNav');
}
if ($.mobile.activePage.attr("id") == "careers") {
$('#careers_').addClass('.activeNav');
}
html:
<nav data-role="navbar"><ul>
<li><a id="home_" href="#home" data-transition="slide">Home</a></li>
<li><a id="solutions_" href="#solutions" data-transition="slide">Solutions</a></li>
<li><a id="pension_" href="#pension" data-transition="slide">Pension</a></li>
<li><a id="team_" href="#team" data-transition="slide">Team</a></li>
<li><a id="careers_" href="#careers" data-transition="slide">Careers</a></li>
</ul></nav>
CSS:
nav {position: fixed; bottom: 0; z-index: 2000;}
nav ul {position: fixed; bottom: 0; width: 100%; list-style-type: none;}
nav ul li {width: 20%; padding: 0; float: left; text-align: center; font-size: 12px; text-align: center;
box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
line-height: 20px;
}
nav ul li a {height: 70px; margin: 0 auto -10px auto; display: block;
background-color: #eeeeee; text-decoration: none; padding-top: 5px;
font-weight: bold; color: #325d8a; text-shadow: 0 1px 1px white;
font-family: Helvetica,Arial,sans-serif !important;
white-space: nowrap; border: 1px solid #201d1d !important;
box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
-moz-box-shadow: inset 0 0 25px #858585;
-webkit-box-shadow: inset 0 0 25px #858585;
box-shadow: inset 0 0 25px #858585;
}
nav ul li a:hover {background-color: #999;}
nav ul li a.activeNav {background-color: red !important;}

Answer 1

Here's your solution. I have removed buttons ID's and compared the active page ID with links href. To override the background color, you need to use background webkits. Below is a working example.
HTML
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h1>Home</h1>
<nav data-role="navbar">
<ul>
<li>Home
</li>
<li>Solutions
</li>
<li>Pension
</li>
</ul>
</nav>
</div>
</div>
<div data-role="page" id="solutions">
<div data-role="header" data-position="fixed">
<h1>Solutions</h1>
<nav data-role="navbar">
<ul>
<li>Home
</li>
<li>Solutions
</li>
<li>Pension
</li>
</ul>
</nav>
</div>
</div>
<div data-role="page" id="pension">
<div data-role="header" data-position="fixed">
<h1>Pension</h1>
<nav data-role="navbar">
<ul>
<li>Home
</li>
<li>Solutions
</li>
<li>Pension
</li>
</ul>
</nav>
</div>
</div>
JS
$(document).on('pageshow', function () {
var obj = $(document).find('nav[data-role="navbar"] a');
$.each(obj, function (i, val) {
$(this).removeClass('activeNav');
var active = '#' + $.mobile.activePage[0].id;
if ($(this).attr('href') == active) {
$(this).addClass('activeNav');
}
});
});
CSS
nav {position: fixed; bottom: 0; z-index: 2000;}
nav ul {position: fixed; bottom: 0; width: 100%; list-style-type: none;}
nav ul li {width: 20%; padding: 0; float: left; text-align: center; font-size: 12px; text-align: center;
box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
line-height: 20px;
}
nav ul li a {height: 70px; margin: 0 auto -10px auto; display: block;
background-color: #eeeeee; text-decoration: none; padding-top: 5px;
font-weight: bold; color: #325d8a; text-shadow: 0 1px 1px white;
font-family: Helvetica,Arial,sans-serif !important;
white-space: nowrap; border: 1px solid #201d1d !important;
box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
-moz-box-shadow: inset 0 0 25px #858585;
-webkit-box-shadow: inset 0 0 25px #858585;
box-shadow: inset 0 0 25px #858585;
}
nav ul li a:hover {background-color: #999;}
nav ul li a.activeNav {
background: rgb(255,26,0);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmYxYTAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmMWEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(-45deg, rgba(255,26,0,1) 0%, rgba(255,26,0,1) 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,26,0,1)), color-stop(100%,rgba(255,26,0,1)));
background: -webkit-linear-gradient(-45deg, rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%);
background: -o-linear-gradient(-45deg, rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%);
background: linear-gradient(135deg, rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1a00', endColorstr='#ff1a00',GradientType=1 );
}
Working example.