Scrollspy Highlight 不起作用答案

【问题标题】：Scrollspy Highlight don't workScrollspy Highlight 不起作用
【发布时间】：2016-11-15 20:03:46
【问题描述】：

我对 html 和 css 主题还很陌生。我想创建我的第一个主页，但不幸的是它挂了。我想添加ScrollSpy 以突出显示我的一页项目中的当前部分，但它不起作用，我不知道为什么。

我已经尝试了所有方法，但没有找到解决方案。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="">
		<meta name="author" content="">

		<title>HTML-Projekt</title>
		
		<!-- SCRIPTS -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

		<!-- SCHRIFTARTEN -->
		<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
		<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>

		<!-- LINKS -->
		<link href="css/navbar.css" rel="stylesheet">
		<link href="css/sections.css" rel="stylesheet">
		<link href="css/main.css" rel="stylesheet">		
		<script src="js/navbar.js"></script>
		<script src="js/script2.js"></script>
		<script src="js/smooth-scrolling.js"></script>
	</head>
	
	<body id="page-top" class="index" data-spy="scroll" data-target=".navbar" data-offset="50">
	   
	   <nav id="mainNav" class="navbar">
	<!--<div class="navbar-links"><a class="navbar-links-logo" href="#page-top">Start</a></div>-->
			<ul id="topnavid" class="navbar-rechts topnav">
				<li class="hidden"><a href="#page-top">Home</a></li>
				<li><a class="page-scroll" href="#services">Services</a></li>
				<li><a class="page-scroll" href="#team">Team</a></li>
				<li><a class="page-scroll" href="#geschichte">Geschichte</a></li>
				<li><a class="page-scroll" href="#leere_seite">Leere Seite</a></li>
				<li><a class="page-scroll" href="#kontakt">Kontakt</a></li>
				<li class="icon"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li>
			</ul>
    </nav>
	<header>
	<!-- BILD -->
	</header>
		
			<div id="services" class="section1">
			</div>
			
			<div id="team" class="section2">
			</div>
			
			<div id="geschichte" class="section3">
			</div>
			
			<div id="leere_seite" class="section4">
			</div>
			
			<div id="kontakt" class="section5">
			</div>
			
	</body>
</html>

感谢您的帮助。谢谢你:)

【问题讨论】：

标签： javascript html navbar highlight scrollspy

【解决方案1】：

在您使用的代码中：

<div id="services" class="section1"></div>

尝试将 HTML 中的所有分隔符更改为以下内容：

<div id="section1" class="services"></div>

为什么必须使用id 而不是class 是因为您可以多次使用一个类，id 始终是唯一的，因此您的页面上只需要一个id="yourdiv"。如果您使用多个具有相同值的id，您将收到一条错误消息。

如果您想在id 中包含您的services，您可以使用此HTML：

<div id="services section1"></div>

【讨论】：

【解决方案2】：

您可能需要使用 data-spy 和 data-target 属性包装您的内容，例如：

<div id="content" data-spy="scroll" data-target="#mainNav">content</div>

【讨论】：

【解决方案3】：

谢谢我用<div data-spy="scroll" data-target="#mainNav" data-offset="50"> 扭曲了导航，并将分隔线更改为：<li><a class="page-scroll" href="#section1">Services</a></li>

它仍然不起作用。可能是它可以工作，但没有正确显示。如何将“突出显示”的颜色更改为吸引人的颜色？

	<body id="page-top" class="index">
	   <div data-spy="scroll" data-target="#mainNav" data-offset="50">
	   <nav id="mainNav" class="navbar">
	<!--<div class="navbar-links"><a class="navbar-links-logo" href="#page-top">Start</a></div>-->
			<ul id="topnavid" class="navbar-rechts topnav">
				<li class="hidden"><a href="#page-top">Home</a></li>
				<li><a class="page-scroll" href="#section1">Services</a></li>
				<li><a class="page-scroll" href="#section2">Team</a></li>
				<li><a class="page-scroll" href="#section3">Geschichte</a></li>
				<li><a class="page-scroll" href="#section4">Leere Seite</a></li>
				<li><a class="page-scroll" href="#section5">Kontakt</a></li>
				<li class="icon"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li>
			</ul>
    </nav>
	</div>
	<header>
	<!-- BILD -->
	</header>
		
			<div id="section1" class="services">
			</div>
			
			<div id="section2" class="team">
			</div>
			
			<div id="section3" class="geschichte">
			</div>
			
			<div id="section4" class="leere_seite">
			</div>
			
			<div id="section5" class="kontakt">
			</div>
			
	</body>
</html>

【讨论】：

这是 Rixcy 和我的答案放在一起，请接受其中一个答案和/或投票。您无需发布自己的完整功能答案：stackoverflow.com/help/someone-answers。