时间戳

首页 > 解决方案 > 滚动时导航未突出显示

jquery - 滚动时导航未突出显示

问题描述

我创建了一个动态生成目录的脚本，但由于某种原因，它在滚动时没有突出显示。我不确定为什么它在滚动时不突出显示单个链接。下面是我的 jQuery 脚本。

<script>
$(document).ready(function() {
    $("#toc").append(' ')
    $("h2").each(function(i) {
        var current = $(this);
        current.attr("id", "title" + i);
        $("#toc").append("<li>" + "<a id='link" + i + "' href='#title" + i + "' class='active'" + "' title='" + current.attr("tagName") + "'>" + current.html() + "</a>" + "</li>");

    });

});


$(window).on('scroll', function() {
    $('h2').each(function() {
        if($(window).scrollTop() >= $(this).offset().top) {
            var id = $(this).attr('id');
            $('#toc toc a').removeClass('active');
            $('#toc toc a[href=#'+ id +']').addClass('active');
        }
    });
});

</script>

这是我的 jsfiddle 的链接：https ://jsfiddle.net/dude12go8/138evyj0/4/

标签： jqueryhtmlcss

解决方案

对于 jQuery 中的属性选择器，您应该使用属性后跟$. 查看文档Jquery 属性选择器

我还在以下块中进行了更改，请检查代码段。

$('#toc li a').removeClass('active');
$('a[href$="'+id+'"]').addClass('active');

还要$('li:first-child').children().addClass('active');在末尾添加或.each()将活动类添加到第一项。

var $ = jQuery;
$(document).ready(function() {
	$("#toc").append(' ')
	$("h2").each(function(i) {
		var current = $(this);
		current.attr("id", "title" + i);
		$("#toc").append(`<li><a id="link${i}" href="#title${i}"  title="${current.attr("tagName")}">${current.html()}</a></li>`);
	});
	$('li:first-child').children().addClass('active'); // Add this to add active class only on first item
});


$(window).on('scroll', function() {
    $('h2').each(function() {
        if($(window).scrollTop() >= $(this).offset().top) {
            var id = $(this).attr('id');
            $('#toc li a').removeClass('active');
            $('a[href$="'+id+'"]').addClass('active');
        }
    });
});
h2 {
	border-bottom: 1px dotted #000;
	color: #000;
	margin-top: 1.5rem;
}

#toc{
	color: #000;
	list-style: none;
	margin: 0, 0, 0;
}

#toc li {
	margin: 1rem 0.2rem 0;
	color: #000;
}

#toc li a{
	color: #000;
	font-family: Calibri, Sans-sarif;
	font-weight: bold;
	font-size: 16px;
	cursor: pointer;
	text-decoration: none;
	list-style: none;
}

#toc li a:hover, #toc a.active {
	background: #666;
	color: #000;
}

.nav-container{
	position: fixed;
	left: 0px;
	width: 160px;
	height: 180px;
	padding-top: 0px;
}

.container{
	margin-left: 120px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>Untitled Document</title>

</head>

<body>


<nav class="nav-container">

<ul id="toc"></ul>
</nav>


<div class="container">

<h2>Test1</h2>


<p>This is a test</p>
<p>This is a test</p>


<h2>Test2</h2>

<p>TLSDGn lsjdlgjsldj gljlsdjgljlsdjgljdsl gjldfjgljdfljgldjflkgj ldfjgljldfjgl jldfg</p>
<p>This is a test</p>
<p>This is a another test</p>
<p>This is a another another another test</p>

<h2>Test3</h2>


<p>This is a test</p>
<p>This is a test</p>


<h2>Test4</h2>

<p>TLSDGn lsjdlgjsldj gljlsdjgljlsdjgljdsl gjldfjgljdfljgldjflkgj ldfjgljldfjgl jldfg</p>
<p>This is a test</p>
<p>This is a another test</p>
<p>This is a another another another test</p>

<h2>Test5</h2>


<p>This is a test</p>
<p>This is a test</p>


<h2>Test6</h2>

<p>TLSDGn lsjdlgjsldj gljlsdjgljlsdjgljdsl gjldfjgljdfljgldjflkgj ldfjgljldfjgl jldfg</p>
<p>This is a test</p>
<p>This is a another test</p>
<p>This is a another another another test</p>

</div>

</body>
</html>

推荐阅读