Data-Spy Links ändern sich nicht auf Bildlauf

Ich habe ein Problem mit Data-Spion für Bootstrap. Wenn die Seite geladen ist, ist die aktive Verknüpfung die Verknüpfung aus Abschnitt 4, und wenn ich blättern gehe, ändern sich die Verknüpfungen überhaupt nicht. Hier ist mein Code, was ist falsch daran? Ich habe css und js für bootstrap.Data-Spy Links ändern sich nicht auf Bildlauf

<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Website Builder</title> 
     <!-- CSS Styles --> 
     <link href="{{asset('css/bootstrap.min.css')}}" rel="stylesheet" type="text/css"> 
     <link href="{{asset('css/style.css')}}" rel="stylesheet" type="text/css"> 
     <!-- JavaScript Scripts --> 
     <script type="text/javascript" src="{!! asset('js/jquery-3.1.1.min.js') !!}"></script> 
     <script type="text/javascript" src="{!! asset('js/bootstrap.min.js') !!}"></script> 
     <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
     <script type="text/javascript" src="{!! asset('js/template.js') !!}"></script> 
    </head> 

<body data-spy="scroll" data-target=".navbar" data-offset="50"> 

    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span>       
     </button> 
       <a class="navbar-brand" href="{{url('template')}}">WebsiteBuilder</a> 
      </div> 
      <div class="collapse navbar-collapse" id="myNavbar"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#section1">Section 1</a></li> 
      <li><a href="#section2">Section 2</a></li> 
      <li><a href="#section3">Section 3</a></li> 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#section41">Section 4-1</a></li> 
       <li><a href="#section42">Section 4-2</a></li> 
      </ul> 
      </li> 
     </ul> 
       </nav> 

<div id="section1" class="container-fluid"> 
    <h1>Section 1</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section2" class="container-fluid"> 
    <h1>Section 2</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section3" class="container-fluid"> 
    <h1>Section 3</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section41" class="container-fluid"> 
    <h1>Section 4 Submenu 1</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section42" class="container-fluid"> 
    <h1>Section 4 Submenu 2</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div>

Quelle

2016-12-16 Przemek Wojtas

Basierend auf Ihrem Beispiel gibt es nicht genug Inhalt, um tatsächlich durch zu scrollen. Sie haben auch zwei nicht geschlossene div Tags innerhalb Ihrer navbar und Sie müssen position: relative auch auf die body anwenden.

Versuchen Sie etwas Höhe zu Ihren Abschnitten hinzuzufügen, um selbst zu sehen.

Arbeitsbeispiel:

body { 
 
    position: relative; 
 
} 
 
section { 
 
    padding: 50px; 
 
    height: 500px; 
 
} 
 
#section1 { 
 
    background: #ffebee; 
 
} 
 
#section2 { 
 
    background: #f44336; 
 
} 
 
#section3 { 
 
    background: #d32f2f; 
 
} 
 
#section41 { 
 
    background: #b71c1c; 
 
} 
 
#section42 { 
 
    background: #ff1744; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<body data-spy="scroll" data-target=".navbar" data-offset="50"> 
 

 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 

 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">WebsiteBuilder</a> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="#section1">Section 1</a> 
 
      </li> 
 
      <li><a href="#section2">Section 2</a> 
 
      </li> 
 
      <li><a href="#section3">Section 3</a> 
 
      </li> 
 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#section41">Section 4-1</a> 
 
       </li> 
 
       <li><a href="#section42">Section 4-2</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </div> 
 

 
    </div> 
 
    </nav> 
 

 
    <section id="section1"> 
 
    <h1>Section 1</h1> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    </section> 
 

 
    <section id="section2"> 
 
    <h1>Section 2</h1> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    </section> 
 

 
    <section id="section3"> 
 
    <h1>Section 3</h1> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    </section> 
 

 
    <section id="section41"> 
 
    <h1>Section 4 Submenu 1</h1> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    </section> 
 

 
    <section id="section42"> 
 
    <h1>Section 4 Submenu 2</h1> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    </section> 
 

 

 

 
</body> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Quelle

2016-12-16 17:15:17 vanburen

Nun Ihr Beispiel funktioniert gut, aber ich frage mich, warum, wenn ich genau denselben Code kopiert, meins nicht funktionieren. es scheint, Bootstrap und jquery zu laden, ich hatte css auf die gleiche Weise wie Sie eingerichtet, bevor Sie eine Antwort gaben –

Ohne zusätzliche Informationen gibt es nichts, was ich hinzufügen kann, um Ihnen zu helfen, das Problem zu lösen. – vanburen

Welche Art von Informationen benötigen Sie? –

Data-Spy Links ändern sich nicht auf Bildlauf

Antwort

Verwandte Themen