Cratobi Cratobi - 5 months ago 19
CSS Question

Why isn't addClass working

I'm including the navbar of my website with php so I can't use class="active" to indicate the active tab of my navigation bar separately. So I decided to use a little jquery code to add active class on the corresponding tab. But for some reason its not working and I can't find any solution.

Here is my jquery:

<script>
$(document).ready(function(){
$("#nav_about").addClass("active");
});
</script>


And here is my navbar html:

<nav class="navbar navbar-default navbar-sticky">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand hidden-sm" href="#myPage">Logo</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-center">
<li cl ass="active"><a href="index.php">Home</a></li>
<li id="nav_about"><a href="about.php">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> TEAM <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="teachers_panel.php">Teachers</a></li>
<li><a href="students_panel.php">Students </a></li>
</ul></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Events <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Upcoming Events</li>
<li><a href="sidebar-right.php">1st ACC IT Carnival 2016</a></li>
<li class="dropdown-header">Past Events</li>
<li><a href="cgc.php">Inter House Cyber Gaming Competition 2015</a></li>
<li><a href="tbtt.php">Take Back the Tech </a></li>
<li><a href="gbb.php">Google Bus Bangladesh at ACC </a></li>
<li><a href="moz.php">Mozcoffee at ACC </a></li>
<li><a href="hoc.php">Hour Of Code </a></li>
<li><a href="hjfp.php">Club Hangoutat JFP </a></li>
</ul></li>
<li><a href="u_cons.php">Gallery</a></li>
<li><a href="u_cons.php">Get Involved</a></li>
<li><a href="contact.php">Contact</a></li>
</li>
</ul>
</div>
</div>
</nav>


Edit:

I've Edited the mistake which are not ending the $(document).ready(.. and not putting a $ before (document).

Answer

You forgot the $ before (document).ready(function(){:

<script>
$(document).ready(function(){
  $("#nav_about").addClass("active");
}
</script>