在 head.html 中,导航菜单的写法
<div class="topmenu"> <ul> <li><a href="Default.html">Home</a></li> <li><a href="NewsLetter.html">Newsletter</a></li> <li><a href="#">Forms</a></li> <li><a href="#">Mail</a></li> <li><a href="#">Service</a></li> <li style="border:none;"><a href="#">HSE</a></li> <li><a href="#">MainMenu2</a> <ul> <li>submenu1</li> <li>submenu2</li> <li>submenu3</li> </ul> </li> </ul> </div>
在 head.html 最后加入以下 javascript
<script type="text/javascript"> $(function() { // this will get the full URL at the address bar var url = window.location.href; // passes on every "a" tag $(".topmenu a").each(function() { // checks if its the same on the address bar if (url == (this.href)) { $(this).closest("li").addClass("active"); //for making parent of submenu active $(this).closest("li").parent().parent().addClass("active"); } }); }); </script>
或者另一种写法
<script type="text/javascript">
// 突出显示当前页面的导航菜单
$(document).ready(function ($) {
var url = window.location.href;
var activePage = url;
$('.nav a').each(function () {
var linkPage = this.href;
if (activePage == linkPage) {
$(this).closest("li").addClass("active");
}
});
});
</script>
在 css 样式文件中,激活菜单的样式写法
.topmenu ul li.active a, .topmenu ul li a:hover { text-decoration:none; color:#fff; background:url(../images/menu_a.jpg) no-repeat center top; }