Current link does not stay highlighted
Question
I am trying to get the navigation bar links to remain a certain color depending on the active page. I have used the explaination in this article before, and it worked without any issues. I'm not sure why it doesn't work now. Any tips?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Orion Controls®</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Oswald::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
<script type="text/javascript">
$(document).ready(function() {
$("[href]").each(function() {
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
});
</script>
</head>
<body bgcolor="#e6e6e6">
<div class="container">
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li class='active'><a href='index.html'>Home</a></li>
<li><a href='overview.php'>Overview</a></li>
<li><a>Products</a>
<ul>
<li><a href='vcm-x.php'>VCM-X E-BUS Controller</a></li>
<li><a href='vcbx.php'>VCB-X Controller</a></li>
<li><a href='vav-zone.php'>VAV Zone Controllers</a></li>
<li><a href='mod-service.php'>Modular Service Tool SD</a></li>
<li><a href='sys-man.php'>System Manager TS</a></li>
<li><a href='prism2.php'>Prism 2 Software</a></li>
<li><a href='sensors.php'>Sensors</a></li>
<li><a href='ptlink.php'>PT Link II</a></li>
<li><a href='gpcxp.php'>GPC-XP</a></li>
</ul>
</li>
<li><a>Downloads</a>
<ul>
<li><a href='documentation.php'>Documentation</a></li>
<li><a href='software.php'>Software</a></li>
</ul>
<li><a href='training.php'>Training</a></li>
<li><a href='contacts.html'>Contacts</a></li>
</ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
CSS:
@font-face {
font-family : "'Oswald'";
font-style : normal;
font-weight : 400;
src : local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/Y_TKV6o8WovbUd3m_X9aAA.ttf) format('truetype');
}
@import url(http://fonts.googleapis.com/css?family=Oswald);
body, nav, ul, li, a {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
.nav a:hover{
background : linear-gradient(to bottom, #83c7cf 0%, #67b0ba 100%);
border-top : none;
border-left : none;
background-position: bottom center;
color: white;
}
.nav .parent:hover{
background-image: url("downArrow.png");
background-repeat: no-repeat;
background-color:#83c7cf;
border-top : none;
border-left : none;
}
.nav > ul li a.active{
background : linear-gradient(to bottom, #83c7cf 0%, #67b0ba 100%);
color : white;
}
.nav > ul li.parent > a.active {
background : linear-gradient(to bottom, #83c7cf 0%, #67b0ba 100%);
border-top : none;
border-left : none;
}
.container {
width: 90%;
max-width: 1175px;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background:black;
/*from orion site*/
position: relative;
float: none;
margin: 0 0 19px;
border: 5px solid #eeeeee;
padding: 0;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 25px 15px;
background: white;
color: black;
border-top: none;
border-left: none;
border-right : 1px solid #ececec;
text-transform: uppercase;
}
.nav li {
position: relative;
line-height: 22px;
}
.nav > li {
float: left;
width:16.6666666666667%;
text-align: center;
}
.nav > li > .parent {
background-image: url("downArrow.png");
background-repeat: no-repeat;
background-position: bottom center;
}
.nav > li > a {
display: block;
font: bold 15px/18px Oswald;
color: #3f3f3f;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
padding: 10px 15px;
position: relative;
z-index:100;
width: 193px;
color: #a9a9a9;
text-transform: uppercase;
font: 11px/1.2em "Helvetica Neue", Helvetica, Arial, sans-serif;
transition: 200ms all;
text-align: center;
background: linear-gradient(to bottom,#f7f7f7 0%,#ffffff 100%);
}
.nav li li li a {
background:#249578;
z-index:200;
border-top: 1px solid #1d7a62;
}
@media screen and (max-width: 768px) {
.active {
display: block;
}
.nav > li {
float: none;
width: auto;
text-align: left;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav li li a{
text-indent: 25px;
width: auto;
text-align: left;
border-top: 1px solid #eee;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
.nav .parent:hover{
background-image: url("downArrow.png");
background-repeat: no-repeat;
background-color:#83c7cf;
border-top : none;
border-left : none;
background-position: 95% 50%;
}
}
JAVA:
var ww = document.body.clientWidth;
$(document).ready(function() {
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
adjustMenu();
})
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
var adjustMenu = function() {
if (ww < 768) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$(".nav li").unbind('mouseenter mouseleave');
$(".nav li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
}
else if (ww >= 768) {
$(".toggleMenu").css("display", "none");
$(".nav").show();
$(".nav li").removeClass("hover");
$(".nav li a").unbind('click');
$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
// must be attached to li so that mouseleave is not triggered when hover over submenu
$(this).toggleClass('hover');
});
}
}
2 answers
solution1
0 2014-05-01 13:01:40
JSFiddle
Here is a jsfiddle for the solution i posted yesterday.
$('a.menu').click(function(){
$('a.menu').removeClass("active");
$(this).addClass("active");
});
Reference - Current menu link in nevigation bar must stay highlighted
solution2
0 2014-05-01 13:04:49
window.location.hash returns anything following a # within a URL:
http://example.com/#example // #example
http://example.com/test.php#example // #example
http://example.com/example.php#example // #example
What you want to match on here is the pathname using window.location.pathname :
http://example.com/ // "/"
http://example.com/text.php // "/test.php"
http://example.com/example.php // "/example.php"
$("[href]").each(function() {
if (this.href == window.location.pathname.replace("/", "") {
$(this).addClass("active");
}
});
Note that I've had to use replace() to remove the / .
However things like this are best suited for server-side code; adding the .active class directly to the markup without having to wait for JavaScript to execute.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
JQ Toggle and STAY highlighted
why doesnt it stay highlighted in jQuery?
How to stay on current window tab when the link opens in new tab
How to stay on current window when the link opens in new tab?
Make Button Stay Highlighted After Being Clicked
active anchor link not being highlighted
Keep active link (box) highlighted
highlighted current page not going current page
Navigation stay Highlight if in current page
Link to stay bold after loading
Related Tags