jQuery Mobile Active Nav Item

Question

Я пытаюсь создать текущий/активный nav для каждой страницы, и он просто не работает. Я здесь в затруднении. Любая помощь будет принята с благодарностью. Я использую только одну навигацию для всех пяти «страниц» (я предпочитаю, чтобы контент/«страница» скользили, пока навигатор сохраняется).

Вот мои .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

Вот ваше решение. Я удалил ID кнопок и сравнил активный идентификатор страницы со ссылками href. Чтобы переопределить цвет фона, вам необходимо использовать веб-киты background. Ниже приведен рабочий пример.

HTML

<div data-role="page" id="home"> 
<div data-role="header" data-position="fixed"> 
    <h1>Home</h1> 

    <nav data-role="navbar"> 
     <ul> 
      <li><a href="#home" data-transition="slide">Home</a> 

      </li> 
      <li><a href="#solutions" data-transition="slide">Solutions</a> 

      </li> 
      <li><a href="#pension" data-transition="slide">Pension</a> 

      </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><a href="#home" data-transition="slide">Home</a> 

      </li> 
      <li><a href="#solutions" data-transition="slide">Solutions</a> 

      </li> 
      <li><a href="#pension" data-transition="slide">Pension</a> 
      </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><a href="#home" data-transition="slide">Home</a> 

      </li> 
      <li><a href="#solutions" data-transition="slide">Solutions</a> 

      </li> 
      <li><a href="#pension" data-transition="slide">Pension</a> 
      </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.