What could be the reason my Bootstrap navbar is failing to display the active button?

https://i.sstatic.net/J5vTw.png

For my first attempt at utilizing bootstrap, I have grasped the concept of linking the js and stylesheets in the head section of a master page. Despite following the necessary steps, I am encountering issues with setting the active class based on the clicked page. I am uncertain about what mistake I might be making; please forgive me if the solution is simpler than I realize.

<head runat="server">
<title></title>
<link href="Style/css/bootstrap.css" rel="stylesheet" />
<script src="Style/js/bootstrap.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>

https://pastebin.com/nBKYaRzh

The code doesn't display correctly here, so I've shared it on pastebin for better formatting.

javascripthtmlcssasp.netbootstrap-4

Answer №1

<nav class="navbar-default menu">
      <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand">Shittalk.tf</a>
         </div>
       <ul class="nav navbar-nav">
         <li class="active" ><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Donate</a></li>
       </ul>
      </div>
</nav>

<script type="text/javascript">
  $(document).ready(function(){
   $('.menu li').click(function(e) {
   console.log("hello")
   var $this = $(this);

   $("li").removeClass("active")
   $this.addClass('active');
  e.preventDefault();
  });
 });
  </script>

Remember to include Bootstrap and jQuery when using this code snippet. Check out a working example here

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

Obtain the node identifier within the Angular UI Tree component [angular-ui-tree]

Utilizing Angular UI tree to create a relationship between items and categories has been successful in the default setup. However, a new requirement has emerged to incorporate node/section numbering within the tree for managing hierarchy. I attempted to i ...

javascriptangularjstreeparent-childangular-ui-tree

Are your Promises.all functions executing at the incorrect timing?

I can't seem to understand why Promise.all is not working as expected. Even though the log shows that data for "Streak" and "Last Activity" is successfully retrieved towards the end, I want Promise.all to fetch the data only when everything is filled ...

javascriptnode.jsamazon-web-servicesangular-promise

AngularJS: How to monitor variables without using $watch

I recently came to understand that Javascript operates on a "Call by sharing" principle, which means that everything is passed by value but the original contents of an object can still be modified. To illustrate this concept, consider the following scenari ...

javascriptangularjs

Is the latest version of three.js not compatible with Blender models?

In the past, I would export blender models to use them with three.js, starting from version r47. However, after updating to the latest release, r49, it seems that the same code that used to display the model in the browser no longer works. Should I rever ...

html3dblenderthree.js

What causes certain components in ReactJs to not respond to the `:focus` pseudo-class?

Currently, I am in the process of implementing a straightforward Emoji-Rating system where 5 emojis are displayed on the screen and upon hovering over them, their appearance changes. This functionality is achieved using the :hover pseudo-class. My goal is ...

cssreactjsnpmcomponentsfocus

Using Url.Action in ASP.NET MVC will result in the addition of a semicolon to the href URL

Snippet from my View getItems.cshtml <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> @{int index = 1;} @foreach (var o in ViewBag.CountryList) { <li><a class="dropdown-item&quo ...

c#asp.net-mvcbootstrap-4

Unable to retrieve the $POST value

Upon submission, I should receive an alert with certain values but they appear blank. The alert is displayed, however, the values do not show up. This issue is part of a simple debugging process that I use to verify the correctness of the values. When usi ...

phphtml

What could be causing the model to not bind correctly in nodejs?

In the process of developing a web app with nodejs, angular, and mongo, I have encountered a strange issue. The model is not binding properly from the JSON object. Here is my Schema: var mongoose = require('mongoose'); var productSchema = new ...

javascriptjsonnode.jsmongodb

Mandatory press for a function known as a click

After dealing with a previous question on this matter, I have encountered yet another issue. My goal is to rotate an element clockwise by 22 degrees and then back to its initial state of 0 degrees on click. The first function executes correctly, but the ...

javascriptrotation

When Hyperlink CSS is placed in an external stylesheet (with Bootstrap included), it does not work properly. However, if the CSS is placed inside the same page, it

The issue arises when the css style for a hyperlink color: black; is placed in an external stylesheet. In Example 1, where the css is also written inside the html page, everything works perfectly fine without any issues. <!DOCTYPE html> <html lan ...

htmlcssbootstrap-4

Possibly jQuery (or even the browser itself) serves as a cache-buster for dynamically loaded ajax

I have an issue with loading a view page using the $.ajax() function in jQuery. Despite explicitly setting the "cache" option to true, we are not using $.ajaxSetup() anywhere in the application to override this setting. Below is the code for the ajax requ ...

asp.netjqueryasp.net-mvcajaxcaching

Creating a synchronous loop in Node.js with Javascript

After exhausting various methods such as async/await, synchronous request libraries, promises, callbacks, and different looping techniques without success, I find myself seeking help. The task at hand involves calling the Zoom API to fetch a list of cloud ...

javascriptnode.jsasynchronous

Best approach for retrieving and adding a large number of images when dealing with slower connections

Currently, I am retrieving 100-200 images using a combination of ajax-php-mongodb. The process involves ajax making an initial call with parameters, php on the server side locating the appropriate mongo document containing all image file ids in grid fs, fe ...

javascriptphpjqueryajaxmongodb

Have you opened the DIV in a separate tab yet?

Hey there! So, I've got a question for you. I've got 4 little DIV's with text inside them. At the bottom of each DIV, there's a link that says "show more". When I click on that link, I want the respective DIV to open in a new tab. Ho ...

javascriptjqueryhtmlcss

Execute a function precisely at the start of every second (or at a designated millisecond interval each second)

My goal is to execute a function at the start of every second. Here's an example: function loop() { console.log('loop', new Date()); } setInterval(loop, 1000); Upon running this script with node v11.13.0, I observed the following out ...

javascriptnode.jssettimeoutscheduling

Remove the URL parameters from $_GET and then show a notification message after the update is complete

To achieve the task of changing the user status (active/inactive) from a button, removing all GET parameters from the URL, and showing a bootstrap warning message. Current URL: http://localhost:8282/userslist.php?deactive=59 Desired clear URL: http://loc ...

phpbootstrap-4

Trouble with Mocha async hooks execution?

I keep encountering the issue of receiving 'undefined' for the page in this setup. It appears that none of Mocha's hooks are being executed. I've attempted adding async to the describe at the top level, used done statements, and even tr ...

javascriptnode.jsasync-awaitmocha.jspuppeteer

Dynamic jQuery URL truncater

Is there an on-the-fly URL shortener similar to Tweetdeck available? I have come across several jQuery and JavaScript plugins that can shorten a URL through services like bit.ly when a button is clicked. However, I am looking for one that shortens URLs aut ...

javascriptjqueryurl-rewritingbit.lyurl-shortener

Show different JSON data based on the existence of another key in Javascript

Having recently started learning JavaScript, I attempted the code below but couldn't quite get it to work. Despite consulting various resources, I still wasn't successful. Desired Output: To check if AUTO damage is present in the data. If so, re ...

javascripthtmlangularjsjson

Implement FluentUI Progress Component as the New Style in Blazor

Looking for a solution to remove the track from the FluentUI Progress bar, but limited to using only this library. Unable to consider alternatives. Tried applying CSS in my application to override the default style, but it seems any modifications to the c ...

c#cssblazorfluent-ui