Scrollspy Highlight не работает

Я довольно новичок в html и css-темах. Я хочу создать свою первую домашнюю страницу, но, к сожалению, она висит. Я хочу добавить ScrollSpy, чтобы выделить текущий раздел моего одностраничного проекта, но он не работает, и я не знаю почему.Scrollspy Highlight не работает

Я пробовал все, но не пришел к решению.

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

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

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

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

Я ценю вашу помощь. Спасибо :)

источник

2016-11-15 Anonymous

В своем коде вы используете:

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

источник

2016-11-15 10:55:24 Arendax

Вам может понадобиться обернуть содержимое с данными шпионской и данных целевого атрибута, такие как:

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

источник

2016-11-15 11:00:22 Rixcy

Благодаря я warapped СЧА с <div data-spy="scroll" data-target="#mainNav" data-offset="50"> и я изменил разделители это: <li><a class="page-scroll" href="#section1">Services</a></li>

и еще дон Работает. Может быть, он работает, но не отображается должным образом. Как я могу изменить «выделенный» цвет на somthing броский?

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

источник

2016-11-15 11:40:23

Это Rixcy и мой ответ, вместе взятые, пожалуйста, примите один из ответов и/или upvote. Вам не нужно публиковать свой полный функциональный ответ: http://stackoverflow.com/help/someone-answers. – Arendax

ответ

Смежные вопросы