What's the issue with the addClass function not working as expected?

I am currently integrating the website's navbar using PHP, which is why I am unable to use class="active" to highlight the active tab on my navigation bar individually. To solve this issue, I attempted to add the active class to the corresponding tab using a small jQuery code snippet. However, despite my efforts, it does not seem to be working and I have been unsuccessful in finding a solution.

Here is the jQuery code I used:

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

Below is the HTML code for my navbar:

<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>
                        
                        /* additional event links */

                    </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 have corrected the errors in my code, including missing parentheses after $(document).ready(.. and adding a dollar sign before (document).

jqueryhtmlcss

Answer №1

It appears that there are some errors in your HTML and JS code. Here is the corrected version:

$(document).ready(function(){
  $("#nav_about").addClass("active");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>                    
            </ul>
   </div>
 </div>
</nav>

Answer №2

If you're using jQuery, make sure to use $(document) instead of just document.

$(document).ready(function(){
  $("#nav_about").addClass("active");
});
.active {
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

</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 class="active" 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determine the closest multiple of 50000 by rounding down the number within the designated input

My input range is behaving strangely. The value starts at 0, but it jumps all the way to 40000 in one direction and -10000 in the other direction. I want it to jump by increments of 50000 - the step indicator is already set to 50000. I believe this issue i ...

phphtmlformsrange

Struggling to find a solution for altering font color with jQuery while creating a straightforward menu

I'm having trouble changing the color of the active button pressed to "color:white;"... Here is the link to the jsfiddle: http://jsfiddle.net/wLXBR/ Apologies for the clutter in the file, my css is located at the bottom of the CSS box (Foundation cod ...

jqueryhtmlcss

Steps to hide a div with jQuery when a user clicks outside of a link or the div itself:1. Create a click event

Here's a simple question - I have a link that when clicked, displays a div. If the user clicks away from the link, the div is hidden, which is good. However, I don't want the div to be hidden if the user clicks on it. I only want the div to disap ...

javascriptjquery

Chrome and Firefox browsers are not supporting HTML simple anchor links

Creating a portfolio page at this link (http://198.96.94.51/v2/) and encountering an issue with the navigationMenu. When rapidly clicking on the links on the side, they do not redirect to the correct anchor point (some don't move the page at all). I h ...

htmlcssanchor

<p> The box is massive, and its size is a mystery to me

Why is the box around my paragraph tag so large? I suspect this could be why I am unable to move the <p> tag down with margin-top: 50px; .train p { margin: 0; font-size: 2.5vw; } <div class="train"> <p class="train">In Training& ...

htmlcssparagraph

Having trouble with SVG background image not displaying properly and positioning correctly?

I need help fitting an svg as a background into an element that is 80% of the screen width. Here is the desired final result: The svg effect only works correctly when I reduce the width, but then it breaks in two. I want the svg to appear at 80% width a ...

htmlcss

My jQuery code seems to be in order, so why isn't it working as expected?

I've been attempting to create basic jQuery play/pause buttons for an HTML5 video, but when I click on them, nothing seems to happen. If you have any code that could help with the play/pause functionality, I would greatly appreciate it. Here is the c ...

htmljqueryhtml5-video

Utilizing Jquery to add a delay and animate the sliding up effect on a recently created element

I am looking to apply a slide-up effect to a newly created element after a specified delay. $("div[data-error='true']").delay(5000).slideUp(500, function () { $("#error-alert").remove(); }); $("div[data-success='true']").delay(5000 ...

javascriptjquery

When you set the href attribute, you are essentially changing the destination of the link

UPDATE: I'm not referring to the status bar; instead, I'm talking about the clickable text that leads to a link. /UPDATE I've gone through a few similar posts but couldn't find a solution. I have a link that needs to be displayed. www ...

javascriptjqueryhtmlhref

Swap out the HTML button element for text once the form is submitted

On the main page, I have a button that opens a modal when clicked. Inside the modal, there is a form with a submit button that closes the modal and returns to the main page. After closing the modal, I want to change the HTML button on the main page to plai ...

javascripthtmlcssbuttonmodal-dialog

Populate a dropdown menu in jQuery with options generated from an array

I'm planning to include 4 dropdowns in my project. My approach involves creating 3 arrays (the first dropdown is hardcoded). The idea is that based on the selection made in the first array, the options for the second dropdown will be populated. How ca ...

javascriptjqueryarrays

The presentation of the Google graph with dynamically changing data appears to be displaying inaccurately

I am looking to incorporate a graph displaying sales and purchase data on my webpage. Users should be able to select from categories like Purchase, Sales, or Production. I have separate tables for Purchase (AccPurchase) and Sales (AccSales), with productio ...

javascriptphphtmlcssgoogle-visualization

Web browser control in WinForms fails to trigger the document complete event on an AJAX website

My VB.Net desktop application utilizes the IE browser control to browse the web. Typically, when a regular page is loaded, the document_complete event triggers and allows me to access the resulting page content. However, I'm encountering a problem wit ...

htmlvb.netajaxautomationwebbrowser-control

Traversing through nested JSON using a jQuery each loop

My goal is to implement a simple JSON file that can be used to populate multiple select boxes. The starting point is a static select box with the following options: <select> <option value="first">This is the first</option> <option val ...

jqueryjson

What is the best way to position HTML labels with CSS3 flexbox?

Check out my codepen to see what I need by clicking on this link: https://codepen.io/tbellmer/pen/RdxBdQ I am new to this and although the form works, I require help with the design. I want both the Action: and Comment: labels to be aligned to the right. ...

htmlcssflexboxlabelalignment

The conditional statement within an AngularJS object is reliant on the selected option within an HTML dropdown menu

I am looking to apply an if condition in an object to capture specific values from two HTML select options. The Angular framework will then post these values to the database based on the user's selection. HTML <tr> <td>En ...

angularjshtml

Having trouble with Laravel 5.4 and getting a 500 internal server error when using ajax with csrf field?

I'm attempting to utilize Ajax to send JSON data to a Laravel function, like so: $.ajax({ url: "{{ route('store-formbuilder') }}", type: 'POST', data: { payload: payload, _token: "{{csrf_token()}}" } }) . ...

phpjqueryajaxlaravellaravel-5.4

Choose value using jQuery option

How can I locate and select an option within a select element using its value? The select input is already a jQuery object. Here is the snippet of code I have written: my_select.filter("option[value='2']").attr('selected', "selected"); ...

jquery

Choosing an element with JavaScript

var displayedImage = document.querySelector('.displayed-img'); var thumbBar = document.querySelector('.thumb-bar'); btn = document.querySelector('button'); var overlay = document.querySelector('.overlay'); /* Itera ...

javascripthtml

Issue with passing parameter in Jquery AJAX request to controller function

Currently, I am integrating a Jquery AJAX Call into my MVC Application. Here is an overview of how my view is structured: <p> Name @Html.TextBox("Name") Date @Html.TextBox("Date") <input type="submit" id="SubmitName" value="Submit" /& ...

javascriptjqueryajaxpostasp.net-mvc-ajax