自动切换导航高亮效果（基于jQuery）

html代码1 - 导航

<div class="head">
  <ul>
    <li class="on"><a href="#dx1">首页</a></li>
    <li><a href="#dx2">产品展示</a></li>
    <li><a href="#dx3">案例展示</a></li>
    <li><a href="#dx4">关于我们</a></li>
    <li><a href="#dx5">联系我们</a></li>
  </ul>
</div>

html代码2 - 模块

<div class="temp" id="dx1">首页相关模块</div>
<div class="temp" id="dx2">产品展示相关模块</div>
<div class="temp" id="dx3">案例展示相关模块</div>
<div class="temp" id="dx4">关于我们相关模块</div>
<div class="temp" id="dx5">联系我们相关模块</div>

CSS代码

.head ul li{
    background:#999
}
.head ul li.on{
    background:#333
}

jQuery代码

<script type="text/javascript">
$('.head li a').click(function(){
	$('html,body').animate({
	    scrollTop:$($(this).attr('href')).offset().top - 80}, 300);
});	
fxtop();
function fxtop(){
	$(window).bind("scroll", function(event) {
		if($(window).scrollTop()>=$('.head').offset().top){
			$(".head").addClass('ons');
		}else{
			$(".head").removeClass('ons');
		}　
		var list = $('.temp');
		var tt = $(window).scrollTop()+$('.head').height();
		var aa = $('.head li');
		list.each(function(index) {
			if ($(this).offset().top <= tt && tt < $(this).offset().top + $(this).height()) {
				var id = $(this).attr('id');
				aa.each(function(i){
					var a = $(this).find('a').attr('href');
					if('#'+id == a){
						$(this).addClass('on');
					}else{
						$(this).removeClass('on');
					}
				});
				return false
			}
			
		})
	});
}
</script>