2016-11-15 3 views
0

私はHTMLとCSSのテーマにはかなり新しいです。私は最初のホームページを作成したいが残念ながらそれはぶら下がっている。私はScrollSpyを追加して、私の1ページプロジェクトの現在のセクションを強調したいが、それはうまくいかず、理由がわからない。Scrollspyハイライトがうまくいきません

私はすべてを試しましたが、解決策には至っていません。

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

私はあなたの助けに感謝。ありがとう:)

あなたが使用してコードで

答えて

0

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

はこのような何かにあなたのHTML内のすべての分周器を変更してください:

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

あなたがidなくclassを使用しなければならない理由クラスを複数回使用できるため、idは常にユニークなので、ページにはid="yourdiv"が1つだけ必要です。同じ値で複数のidを使用すると、エラーメッセージが表示されます。

あなたはこのHTMLを使用することができますidであなたのservicesを持つようにしたい場合:

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

あなたは、データ・スパイおよびデータ・ターゲット属性を使用してコンテンツをラップする必要があるかもしれません、例えば:

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

おかげで 私は<div data-spy="scroll" data-target="#mainNav" data-offset="50">でNAVをwarapped、私はこれに仕切りを変更:<li><a class="page-scroll" href="#section1">Services</a></li>

そして、それはまだドン作品はありません。 正常に動作している可能性がありますが、正しく表示されていない可能性があります。どのように私は "強調表示"の色をキャッチーなものに変えることができますか?

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

+0

これはRixcyと一緒に入れ、私の答えは、答えと/またはupvoteの1を受け入れてください。あなた自身の機能的な答えを投稿する必要はありません:http://stackoverflow.com/help/someone-answers。 – Arendax

関連する問題