我有一个奇怪的问题,当用户滚动或单击每个菜单项时,我使用jQuery自动向内部菜单添加一个“活动”类(并更新url)。在滚动它工作正常,但点击它粗体和更新的项目上面的项目点击的网址,我不知道为什么.
我有一个这样的菜单:
<ul>
<li><a href="#1" data-id="1" class="toc-link">link 1</a></li>
<li><a href="#2" data-id="2" class="toc-link">link 2</a></li>
...etc
</ul>
和内容设置为:
<h2 id="1">title 1<h2>
<p>content</p>
<h2 id="2">title 2<h2>
<p>content</p>
...etc
jQuery脚本:
jQuery(document).ready(function() {
// Update the active header and URL on click
jQuery('.toc-link').click(function(e) {
e.preventDefault();
var activeId = jQuery(this).attr('data-id');
var url = window.location.href.split('#')[0];
var newUrl = url + '#' + activeId;
window.history.pushState('', document.title, newUrl);
jQuery('.toc-link.active').removeClass('active');
jQuery(this).addClass('active');
// Scroll to corresponding header
var headerTop = jQuery('#' + activeId).offset().top;
jQuery('html, body').animate({ scrollTop: headerTop }, 500);
});
// Update the active header and URL on scroll
jQuery(window).scroll(function() {
var scrollPos = jQuery(window).scrollTop();
var activeId = null; // Initialize activeId to null
jQuery('h2').each(function() {
var headerTop = jQuery(this).offset().top;
var id = jQuery(this).attr('id');
if (scrollPos >= headerTop) {
activeId = id;
}
});
if (activeId !== null) {
var newUrl = window.location.href.split('#')[0] + '#' + activeId;
window.history.pushState('', document.title, newUrl);
jQuery('.toc-link').removeClass('active'); // remove active class from all links
jQuery('.toc-link[data-id="' + activeId + '"]').addClass('active'); // add active class to matching link
}
});
});
您可以在操作here中看到这个问题。
我觉得这是一个简单的修复,但我的JavaScript不是很好。我很感激任何指点。谢谢你,谢谢
2条答案
按热度按时间hm2xizp91#
我在控制台观察到
当点击标签时,你的数据ID对我来说很奇怪,如下所示:
activeId = '1-%D7%94%D7%9C%D7%94%D7%A7%D7%95%D7%AA-%D7%91%D7%A7%D7%95%D7%9E%D7%93%D7%99%D7%94-%D7%93%D7%9C%D7%B3%D7%90%D7%A8%D7%98%D7%94'
你可以检查你的active-Id,因为你已经在那个属性中传递了数字ID。
taor4pac2#
长话短说,问题似乎出在我滚动页面的方式上。虽然可能有更好的解决方案,但这是我提出的-将
100
从headerTop
变量中删除: