下载鸥 > 网站下载 > 开发教程 > JS/JQuery

自动切换导航高亮效果(基于jQuery)

298 2021-09-05 15:35:05

收藏
在一些单页面站点中,网站的各个主模块都在同一个页面,点击导航可以页面内跳转,在滚动时可以自动切换导航的高亮效果。这个功能要怎样实现呢?

自动切换导航高亮效果(基于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>
注意,jQuery代码开始之前要引入jQuery库,否则无效。

这样,我们就实现了导航高亮效果随鼠标滚动发生变化,点击导航也可以自动跳转到对应的区域。

本文地址:https://xzo.com.cn/develop/js/1047.html

有帮助,很赞!

信息来源:下载鸥
信息标签
导出教程 下载word版教程
发表评论 共有条评论
关于JS/JQuery


JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

JavaScript十分强大,不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理,都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中。

推荐JS/JQuery开发教程
JS怎样做倒计时效果?
JS怎样做倒计时效果?

在各种盛大的节日、活动前,网站制作倒计时特效可有效给活动页引流。那么,怎样...

1 330
通过原生的JS实现点击复制效果
通过原生的JS实现点击复制效果

对于网站、app开发等工作而言,复制是一个非常常见的功能。很多人到处找插件...

1 296
怎样点击清除ul里的全部li信息?
怎样点击清除ul里的全部li信息?

在通过jQuery做数据交互时我们可能存在这样的需求:通过点击按钮清空ul里的li...

1 372
Superslide响应式页面直接应用手机端技巧介绍
Superslide响应式页面直接应用手机端技巧介绍

如果是响应式网站,那么用superslide做轮播图需要做两个,这无疑是非常不方便的...

1 335
JS控制输入字数的两个方案
JS控制输入字数的两个方案

我们在文章输入框中经常有用到字数控制,但字数控制有两种方案,一种是字母/空...

0 289
js点击追加信息到textarea
js点击追加信息到textarea

通过灵活运用js,我们可以轻松实现点击追加相关信息到textarea的功能。这个功...

0 456
js判断windows操作系统还是mac os系统
js判断windows操作系统还是mac os系统

网站日常访客主要是windows和mac os两种操作系统,如果网站提供资源下载,则需...

0 1507
jQuery怎样给图片添加默认域名?
jQuery怎样给图片添加默认域名?

在很多网站中,图片的默认路径是相对于根目录的绝对路径,如果是其他站点引用,则...

0 332
随机JS/JQuery开发教程
JS判断访问域名并跳转
JS判断访问域名并跳转

很多时候,我们要防止资源盗用,此时可以通过js验证访问域名并跳转的方式处理。...

0 871
jQuery怎样给图片添加默认域名?
jQuery怎样给图片添加默认域名?

在很多网站中,图片的默认路径是相对于根目录的绝对路径,如果是其他站点引用,则...

0 332
JS获取浏览器语言(中英文多语言站)并自动跳转代码
JS获取浏览器语言(中英文多语言站)并自动跳转代码

如果是多语言站点,主动获取浏览器默认语言并自动进行跳转可以有效降低跳出率...

0 738
JS获取URL参数及编解码
JS获取URL参数及编解码

JS获取URL参数及编解码是一项比较常规的操作,以下是Jxinx博客介绍的JS获取UR...

0 814
JS判断苹果iPhone与iPad、安卓设备类型适配
JS判断苹果iPhone与iPad、安卓设备类型适配

在网站开发的过程中,一些涉及到资源下载的网站会通过判断不同系统手机来展示...

3 515
js网站视频播放器ckplayer和dplayer优缺点分析
js网站视频播放器ckplayer和dplayer优缺点分析

dplayer和ckplayer都是非常流行的web视频播放器,二者都占有相当大的用户市场...

0 1297
dplayer.js播放器始终无法生效的原因
dplayer.js播放器始终无法生效的原因

今天在折腾dplayer播放器时,发现dplayer播放始终无法生效,引入的m3u8文件也一...

1 271
js调用/获取当前页面链接与参数的方法
js调用/获取当前页面链接与参数的方法

在网站开发的过程中,我们经常会用到当前页面链接以进行url跳转或是其他操作...

0 237
客服QQ:341553759
点击咨询 常见问题 >
官方交流群:90432500
点击加入