Question

我正在尝试为每个页面设置当前/活动导航的样式，但它无法正常工作。我在这里不知所措。任何帮助将不胜感激。我只使用一个导航用于所有五个“页面”（我更喜欢内容/“页面”在导航持续时滑动）。

这是我的.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 ID，并将活动页面ID与链接href进行了比较。要覆盖背景颜色，您需要使用background webkits。以下是一个工作示例。

<强> 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.

jQuery Mobile Active Nav Item

1 个答案: