Donc j'essaye d'ajouter une classe mais ça ne marche pas

<script>
    var url = document.location.pathname;
    debugger;
    if(url === '/about.php') {
        $('.about').addClass('active');
        //document.getElementsByClassName('about')[0].addClass('active');
        console.log(url);
    }
//important part start
    if(url === '/index.php') {
        $('.homee').addClass('active');
        document.getElementsByClassName('homee')[0].addClass('active');
        console.log(url); 
    } 
//important part end
    if(url === '/sch.php') {
        $('.schedule').addClass('active');
        //document.getElementsByClassName('schedule')[0].addClass('active');
        console.log(url);
    }
    if(url === '/images.php') {
        $('.gallery').addClass('active');
        //document.getElementsByClassName('gallery')[0].addClass('active');
        console.log(url);
    }
    if(url ===  '/videos.php') {
        $('.gallery').addClass('active');
    }
    console.log(url);

    </script>

<ul class="menu" >
    <li class='homee' ><a href="index.php">HOME</a></li>
</ul>

Comme vous pouvez le voir, j'ai essayé 2 méthodes et $ ('. home'). addClass ('active'); n'a pas dit Impossible de lire la propriété 'addClass' de undefined mais il n'a toujours pas ajouté la classe

3
Aca lubascik 14 avril 2018 à 23:21

3 réponses

Meilleure réponse

Vous exécutez le script avant que le code HTML ne soit rempli - au moment où l'analyseur arrive à la ligne $('.homee').addClass('active');, le <li class='homee' > n'a pas encore été créé, car comme vous pouvez le voir, l'élément est en dessous du script.

Enveloppez tout votre script dans une fonction qui se déclenche une fois le document analysé:

<script>
  $(function() {
    var url = document.location.pathname;
    debugger;
    if(url === '/about.php') {
      $('.about').addClass('active');
      //document.getElementsByClassName('about')[0].addClass('active');
      console.log(url);
    }
    //important part start
    if(url === '/index.php') {
      $('.homee').addClass('active');
      document.getElementsByClassName('homee')[0].addClass('active');
      console.log(url); 
    } 
    //important part end
    if(url === '/sch.php') {
      $('.schedule').addClass('active');
      //document.getElementsByClassName('schedule')[0].addClass('active');
      console.log(url);
    }
    if(url === '/images.php') {
      $('.gallery').addClass('active');
      //document.getElementsByClassName('gallery')[0].addClass('active');
      console.log(url);
    }
    if(url ===  '/videos.php') {
      $('.gallery').addClass('active');
    }
    console.log(url);
  });
</script>

Encore mieux, mettez le script dans un fichier séparé et donnez-lui l'attribut defer:

<script src="myscript.js" defer>
3
CertainPerformance 14 avril 2018 à 20:25

.addClass () est une méthode jQuery. Si vous souhaitez ajouter la classe en utilisant le javaScript simple, vous pouvez écrire:

document.getElementsByClassName('homee')[0].classList.add('active')

Pour la documentation, voir classList

document.addEventListener("DOMContentLoaded", function(event) {
  document.getElementsByClassName('homee')[0].classList.add('active')

});
.active {
  background: red;
}
<ul class="menu" >
    <li class='homee' ><a href="index.php">HOME</a></li>
</ul>
0
gaetanoM 14 avril 2018 à 20:31

Vous devez encapsuler votre code si vous souhaitez utiliser JQuery

(function($) {
    $(document).ready(function(){
       // your code here
    }); 
})(jQuery);
1
Dmitriy Panov 14 avril 2018 à 20:26