导航高亮是一种很常见的需求，包括：
- 当前页面的导航高亮；
- hover时高亮。
我们主要来讨论第一种，如果你用JS控制，那么在脚本加载好之前，当前页面不会高亮，而当脚本加载之后会突然高亮。这种情况下会出现闪烁，用JS吃力不讨好。当然你可以使用后端渲染如PHP、JSP、ASP等动态渲染。但如果仅仅是前端该如何实现呢？
原理和思路特别简单，分为3步：
1、给不同的页面body添加不同的类，用于标识不同的页面：
<!-- home.html -->
<body class="home"></body>
<!-- buy.html -->
<body class="buy"></body>
2、而 li 也用 class 标识，并和 body 的 class 关联起来：
<li class="home"></li>
<li class="buy"></li>
3、然后可以用当前页面的样式，覆盖掉默认的样式：
nav li {
opacity: 0.5;
}
nav li:hover {
opacity: 1;
}
/* Main */
body.home nav li.home,
body.buy nav li.buy {
opacity: 1;
}