JSFiddle

Question

我试图让导航栏链接保持某种颜色，具体取决于活动页面。我以前在本文中使用了解释，并且没有任何问题。我不确定为什么它现在不起作用。有什么提示吗？

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Orion Controls&reg;</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');
        });
    }
}

Answer 1

JSFiddle

这是我昨天发布的解决方案的jsfiddle。

$('a.menu').click(function(){
    $('a.menu').removeClass("active");
    $(this).addClass("active");
});

参考 - Current menu link in nevigation bar must stay highlighted

Answer 2

window.location.hash会返回网址中#之后的所有内容：

http://example.com/#example               // #example
http://example.com/test.php#example       // #example
http://example.com/example.php#example    // #example

您要在此处匹配的是pathname使用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");
    }
});

请注意，我必须使用replace()删除/。

但是这样的事情最适合服务器端代码;将.active类直接添加到标记中，而不必等待JavaScript执行。

当前链接不会保持突出显示

2 个答案:

JSFiddle