Dev Faq
0
votes

Ajouter une classe active à la LI lorsque la section respective est à l'écran

J'ai une seule page. J'ai min quatre sections sur ma page. Je dois ajouter la classe active code> à la balise LI dans le menu lors du défilement en bas avec la section correspondante. Par exemple, si de la section américaine est à l'écran, ajoutez la classe active à la balise LI. Si la section Galerie est à l'écran, ajoutez une classe active et supprimez la classe active de la LI précédente.

Je dois changer la couleur et ajouter la bordure inférieure à la liste de menus active. Je ne veux pas utiliser de plugin. P>

Ceci est un exemple. Il ajoute de la classe active et de modifier la liste de la liste de navigation de navigation. https://blackrockdigital.github.io/starbootstrap-scrolling-nav/

est-il possible d'utiliser jQuery? p>

p> 

<div class="Wrapper">
  <div class="mainInner bg_white">
    <div class="linkWrappers">
      <header class="headerMenu">
        <div class="anchorLinks smothscrollclass">
          <ul>
            <li><a href="">Home</a></li>
            <li><a href="#aboutus">About</a></li>
            <li><a href="#service">Service</a></li>
            <li><a href="#gallery">Gallery</a></li>
            <li><a href="#contactus">Contact</a></li>
          </ul>
        </div>
      </header>

    </div>

    <div class="WrapperInner ">
      <section class="aboutus" id="aboutus">
        <h2>About us</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      </section>
      <section class="service" id="service">
        <h2>Service</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


      </section>
      <section class="gallery" id="gallery">
        <h2>Gallery</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      </section>
      <section class="contactus" id="contactus">
        <h2>Contact us</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      </section>
    </div>

  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

0 commentaires

3 Réponses :

0
votes

avec pure JS, vous devez utiliser document.body.scrolltop; pour définir la quantité de défilement défilé, puis retirez le style actif de tous les LI-S et ajoutez-le au courant ou simplement manuellement pour chaque retirer le Précédent pour (laissez i = 0; i ajoutez ensuite au ciblage actuel par ID ou classe unique , fonctionne bien pour moi pour JQuery est la même chose que $ ("corps"). Scrolltop ()

3 commentaires

Pouvez-vous m'aider avec quelques exemples pour plus de compréhension?

Attendez une seconde, je vais ajouter une nouvelle réponse avec un lien à l'exemple

J'ai ajouté une nouvelle réponse qui aiderait je suis sûr;)

0
votes

hi suivre l'extrait ci-dessous ce que je fais ici est fait une seule fonction appelée Activatelink em> strong> et j'ai donné ID à des liens et en cliquant sur le lien que j'ajoute une classe active à Ce LI particulièrement avec l'aide de jQuery

p> 

<div class="Wrapper">
  <div class="mainInner bg_white">



    <div class="linkWrappers">
      <header class="headerMenu">
        <div class="anchorLinks smothscrollclass">
          <ul>
            <li><a id='home-link' onclick="activateLink('home-link')">Home</a></li>
            <li><a id='about-link' onclick="activateLink('about-link','aboutus')" >About</a></li>
            <li><a id='service-link' onclick="activateLink('service-link','service')" >Service</a></li>
            <li><a id='gallery-link' onclick="activateLink('gallery-link','gallery')" >Gallery</a></li>
            <li><a id='contact-link' onclick="activateLink('contact-link','contactus')" >Contact</a></li>
          </ul>
        </div>
      </header>

    </div>

    <div class="WrapperInner ">
      <section class="aboutus" id="aboutus">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      </section>
      <section class="service" id="service">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


      </section>
      <section class="gallery" id="gallery">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      </section>
      <section class="contactus" id="contactus">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      </section>
    </div>

  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

9 commentaires

Donnez-moi un peu de temps pour vérifier cela

Ça ne marche pas..Il travaille sur Click. Je dois ajouter une classe de défilement

ok pouvez-vous s'il vous plaît expliquer brièvement sur quel événement vous vouliez le définir actif

Ceci est l'exemple: aperçu.uideck.com/items/essence-demo/slider .html

OK, je vous ai eu pour que cela montre le lien activé mais ne fait pas défiler jusqu'à la section correspondante. donnez-moi un peu de temps je vais le résoudre

Oui, merci pour la compréhension.

J'ai mis à jour le code ci-dessus, il fonctionne qu'il n'y avait qu'une erreur idiote de Duplicity ID. Essayez-le maintenant

Laissez-nous Continuez cette discussion en chat .

@ user9437856 Avez-vous vérifié

0
votes

J'ai mis à niveau un peu maintenant tout est clair maintenant;)

Pour les rouleaux, j'ai utilisé pure HTML simplement ajouter un ID à l'élément où vous souhaitez faire défiler et ajouter Code> P>

Les classes que j'ai faites avec jQuery comme vous avez demandé p>

2e modification: p>

p>

2 commentaires

Merci pour la réponse, j'ai mis à jour ma description à nouveau. Par exemple, cochez cette image PRNT.SC/T1FZZ3 Je suis sur la section Service, donc je dois changer la couleur de la couleur de service dans le menu.

Oui, j'ai vérifié ça. Vous devez vérifier Ali Snippet afin que vous obtiendrez une idée que je demande.

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO