如何解决Fiddle jQuery 正在处理旧版本,但不是最近的版本?
` Fiddle link: http://jsfiddle.net/vu6hN/28/ `
基本上,如果您将窗口大小扩大到 1230 像素以上,您会注意到右侧有一个导航栏。它应该突出显示您正在滚动的任何部分。
出于某种原因,当我将 jQuery 版本设置为 1.10.1 时,它可以工作。但是当我将其更改为 3.4.1 版本时,它会崩溃!
解决方法
您需要将 #'+ id +'
包裹在 ""
中,例如 $('#nav nav a[href="#'+ id +'"]').addClass('active');
演示
$('#nav nav a').on('click',function(event) {
$(this).parent().find('a').removeClass('active');
$(this).addClass('active');
});
$(window).on('scroll',function() {
$('.target').each(function() {
if($(window).scrollTop() >= $(this).offset().top) {
var id = $(this).attr('id');
$('#nav nav a').removeClass('active');
$('#nav nav a[href="#'+ id +'"]').addClass('active');
}
});
});
* {
margin: 0;
padding: 0;
}
#main {
width: 75%;
float: right;
}
#main div.target {
background: #ccc;
height: 400px;
}
#main div.target:nth-child(even) {
background: #eee;
}
#nav {
width: 25%;
position: relative;
}
#nav nav {
position: fixed;
width: 25%;
}
#nav a {
border-bottom: 1px solid #666;
color: #333;
display: block;
padding: 10px;
text-align: center;
text-decoration: none;
}
#nav a:hover,#nav a.active {
background: #666;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="main">
<div class="target" id="1">TARGET 1</div>
<div class="target" id="2">TARGET 2</div>
<div class="target" id="3">TARGET 3</div>
<div class="target" id="4">TARGET 4</div>
</section>
<aside id="nav">
<nav>
<a href="#1" class="active">Punkt 1</a>
<a href="#2">Punkt 2</a>
<a href="#3">Punkt 3</a>
<a href="#4">Punkt 4</a>
</nav>
</aside>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。