title: Toggle "active" class between li by bootstrap
body: <p>I'm having a trouble with toggling "active" class, my problem is a little bit different from the others, cause I already looked up similar questions. It'll be better if I explain in code.</p>
  
  <p>Here is index.php:</p>
  
  <pre><code>&lt;?php 
  include("module/navbar.html");
  ?&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="row-fluid"&gt;
          &lt;div class="span3"&gt;
              &lt;div class="well sidebar-nav"&gt;
              &lt;ul class="nav nav-list"&gt;
                &lt;li class="nav-header"&gt;Personal&lt;/li&gt;
                &lt;li class="active"&gt;&lt;a href="javascript:void(0);" onclick="profile();"&gt;Profile&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="javascript:void(0);" onclick="my_settings();"&gt;Settings&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="javascript:void(0);" onclick="achievements();"&gt;Achievements&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="javascript:void(0);" onclick="last_results();"&gt;Results&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="span9"&gt;
              &lt;p&gt; Here is the index.php content &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you see there are two menu, first one is top menu which is included by navbar.html and the second is which is in container class. When I click for example "Profile" it just loads the contents of the profile.php it's done by this script</p>
  
  <pre><code>function profile(object){
  
              $(".span9").html(ajax_load)
              .load("module/profile.php")
              .hide()
              .fadeIn("slow");
  }
  </code></pre>
  
  <p>It just changes the content of span9 to the contents of profile.php. Similar to others (settings, etc). The main point is that when I click them it works perfect, the "active" class changes automatically, by the way I'm using this kind of script to toggle "active" class:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
     $(".nav-list li").on("click", function() {
    $(".nav-list li").removeClass("active");
    $(this).addClass("active");
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>And here is the problem. This is navbar.html:</p>
  
  <pre><code>&lt;div class="nav-collapse"&gt;
          &lt;ul class="nav nav-menu"&gt;
            &lt;li class="active"&gt;&lt;a href="index.php"&gt;Main page&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="javascript:void(0);" onclick="grades();"&gt;Grades&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="javascript:void(0);" onclick="attendance();"&gt;Attendance&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="javascript:void(0);" onclick="exams();"&gt;Exams&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="javascript:void(0);" onclick="kbo_result();"&gt;Olympiads&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I click "Exams", the content of row-fluid must be changed to the contents of exams.php like I changed the content of span9. Here is the script:</p>
  
  <pre><code>function exams(object){
  
              $(".row-fluid").html(ajax_load)
              .load("module/exams.php")
              .hide()
              .fadeIn("slow");
  
  }
  </code></pre>
  
  <p>Everything worked great, the contents have been changed, then, when I click the menus in exams.php, my script doesn't work, it just doesn't swap or toggle "active" class, between li. Here is the exams.php:</p>
  
  <pre><code>&lt;div class="row-fluid"&gt;
      &lt;div class="span3"&gt;
        &lt;div class="well sidebar-nav"&gt;
          &lt;ul class="nav nav-list"&gt;
            &lt;li class="nav-header"&gt;PBT Exams&lt;/li&gt;
            &lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;6&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="span9"&gt;
          &lt;p&gt; Here is the exam.php content &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Don't know what could be the problem, "active" class just stays at #1, and doesn't change. Who can answer please, I'll be really grateful.</p>