-1

I am trying to run this code in js but it keeps on bringing this error "'$' is not defined". Is it by any chance linked to jquery? if yes what should i do Actually am working in react js but i decided to make this particular page using simple html css and js so it's a little confusing for me

Here is my code

js file

$('.nav ul li').click (function(){
    $(this).addClick("active").siblings().removeClass('active')
})

Html file

<!DOCTYPE html>
<html lang="en">
  <head>

    <meta charset="utf-8" />
    <title>React App</title>
    <link rel="stylesheet" href="./UserInfo.css">


  </head>
  <body>

    <div class="container">
        <div class="profile-header">
           <div class="profile-img">
             <img src="./bg.jpg" width="200" alt="">
           </div> 
           <div class="profile-nav-info">
            <h3 class="user-name">Ana Sabonga</h3>
            <div class="address">
                <p class="town">Douala</p>
                <span class="school">Saint Jérôme</span>
            </div>
          </div>
        </div>
        <div class="profile-option">
          <div class="notification">
             
          </div>
        </div>
        <div class="main-bd">
          <div class="left-side">
            <div class="profile-side">
              <p class="numero de tel">+237 670028381</p>
              <div class="email">Ana@gmail.com</div>
              <div class="bio">
                <p>Le CA se compose de membres élus par l'AG
                   et a pour mandat de mettre en application
                    la politique générale de la mutuelle. 
                    Les statuts et le règlement intérieur 
                    déterminent les attributions du CA qui
                     dispose de pouvoirs suffisamment 
                     importants pour éviter d'organiser trop
                      fréquemment des AG. Les membres du CA 
                      assurent gratuitement leurs fonctions.</p>
              </div>
            </div>
          </div>
          <div class="right-side">
             <div class="nav" >
               <ul>
                   <li onClick="tabs(0)" class="user-post">InfoUtilisateur</li>
                   <li onClick="tabs(1)" class="user-review">InfoBénéficiaire</li>
                   <li onClick="tabs(2)" class="user-setting">InfoComptabilité</li>
               </ul>
             </div>
             <div class="profile-body">
               <div class="profile-info tab">
                 <p>votre info</p>
               </div>
               <div class="profile-ben tab">
                 <p>vos bénéficiaires</p>
               </div>
               <div class="profile-compte tab">
                 <p>votre compte</p>
               </div>
             </div>
          </div>
        </div>
    </div>
     <script src="./UserInfo.js"></script>
  </body>
</html>
  • 1
    Please google error messages before posting questions here. –  Jun 30 '21 at 20:25
  • 2
    Does this answer your question? [JQuery - $ is not defined](https://stackoverflow.com/questions/2194992/jquery-is-not-defined) – GAntoine Jul 01 '21 at 18:12

1 Answers1

0

You are trying to use jQuery in your javascript and you haven't imported it yet. $ is the alias for jQuery.

Put this line before your script file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Richard Hpa
  • 2,353
  • 14
  • 23