bootstrap scrollspy destaca último botón de enlace de navegación después de cargar

He creado una barra de navegación en la parte superior con 5 enlaces. En la página misma, he agregado 5 secciones con id de acuerdo con el nombre después de la etiqueta # en el elemento. El problema es que el último botón de enlace de navegación está resaltado (la clase 'activa' se agregó en el tiempo de ejecución al principio aunque en el código mismo el primer elemento de la barra de navegación está en "activo". Tengo la última versión de arranque que es v2.0.4 ¿Qué está mal?bootstrap scrollspy destaca último botón de enlace de navegación después de cargar

<div class="navbar" id="MenuBar"> 
    <div class="topHeadContentLogo"></div> 
    <ul class="nav nav-pills" id="MenuUl"> 
     <li class="active"><a href="#Weekly">Weekly</a></li> 
     <li class=""><a href="#Post">Post</a></li> 
     <li class=""><a href="#Audience">Audience</a></li> 
     <li><a href="#Website">Website</a></li> 
     <li><a href="#FAQ">FAQ</a></li> 
    </ul> 
</div> 

<div id="contentDiv"> 
    <section id="Weekly"> 
     <h1>weekly</h1> 
    </section> 

    <section id="Post"> 
     <h1>Post</h1> 
    </section> 

    <section id="Audience"> 
     <h1>Audience</h1> 
    </section> 

    <section id="Website"> 
     <h1>Website</h1> 
    </section> 

    <section id="FAQ"> 
     <h1>FAQ</h1> 
    </section> 
</div> 



$('#MenuBar').scrollspy(); after document ready

Fuente

2012-06-14 Alon

publica el código html del nav y el js para llamar a scrollspy()? – Luca

@luca, editado. ¿Qué estoy haciendo mal? – Alon

Extraño, estoy teniendo el mismo problema con el atributo de datos agregado en la etiqueta del cuerpo. ¿Alguna solución para esto? – davebowker

Agregue data-spy="scroll" a la <body> etiqueta (o cualquier otra etiqueta que es relevante)?

Fuente

2012-06-14 13:29:48 Luca

Sí, he agregado esa etiqueta, pero aún se está activando el último elemento al cargar – Alon

¿ha intentado agregar suficiente contenido a las diferentes secciones, para que no todas aparezcan en la ventana de su navegador al mismo tiempo? Probé tu código en una página de arranque que construí y parece estar bien. Acabo de agregar una gran cantidad de texto a las secciones para asegurarme de que solo se muestre una a la vez en la ventana de mi navegador. – Luca

Si tiene un portofolio en una sección, asegúrese de no utilizar el filtro para mostrar solo una categoría. Es un conflicto –

Esto fue simplemente pasando a mí, y yo tenía datos de espionaje = "scroll" en un elemento extra dentro del que estaba intentando desplazar (quedó de algo, no debería haber estado allí). Remo ving esto solucionó el problema.

Fuente

2012-09-03 03:27:12

documentación más reciente de arranque sugiere seguir

añadir data-spy="scroll" al elemento que desea espiar a (más típicamente esto sería el cuerpo) y data-target=".navbar" para seleccionar qué nav utilizar

Via datos atributos

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

$(function() { 
    $('#MenuUl a:first').tab('show'); 
    })

espero que ayuda a

Fuente

2012-09-03 03:47:22 StarWars

Gracias, eso ayudó ... Debería haberlo leído más claramente, me salté la introducción y fui demasiado rápido a la sección de uso con JavaScript. – knownasilya

Si usted tiene la data-spy conjunto en el 0 Elemento, asegúrese de que el elemento body no esté configurado en height: 100%;. Este fue el problema en mi caso.

Fuente

2012-11-15 07:43:59

¡Este era mi problema! Gracias – Kyle

¿Por qué no marcar esta respuesta como aceptada entonces? Probablemente ayudará a otros también. – wisefish

¿Cómo usar un pie de página adhesivo y una scrollspy? – markus

Esto funcionó para mí. Había agregado data-spy = "scroll" tanto en el cuerpo como en el div que quería que se me espiara. Al eliminarlo se solucionó este problema

Fuente

2014-10-07 11:34:05

tenía este mismo problema. Cambió el bootstrap.min.js a bootstrap.js

parece que la versión de arranque minimizada hace que su último identificador sea la página activa.

Fuente

2016-03-07 21:43:47

bootstrap scrollspy destaca último botón de enlace de navegación después de cargar

Respuesta

Cuestiones relacionadas