Question

我是html和css主题的新手。我想创建我的第一个主页但不幸的是它正在挂起。我想添加ScrollSpy以突出显示我的单页项目的当前部分，但它不起作用，我不知道为什么。

我已尝试过所有方法，但尚未找到解决方案。

＆＃13;

<!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>

＆＃13;

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

Answer 1

在您的代码中使用：

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

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

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

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

如果您希望将services放在id中，则可以使用此HTML：

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

Answer 2

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

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

Answer 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>

Scrollspy突出显示无法正常工作

3 个答案: