How can I use the active class in an ASP.NET application with a Twitter Bootstrap navigation bar

Currently, I am utilizing Twitter bootstrap within an asp.net project and the snippet below showcases my navbar code:

        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
                <a class="brand" href="../">MyApp</a>
                <ul class="nav">
                    <li class="active"><a href="../">Home</a></li>
                    <li><a href="../About.aspx">About us</a></li>
                    <li><a href="../ContactUs.aspx">Contact us</a></li>
                </ul>
            </div>
          </div>
        </div>

I am looking to update the active menu item based on the current page in which the menu is linked. How can I achieve this?

javascriptasp.nettwitter-bootstrap

Answer №1

To retrieve the current URL path using JavaScript, you can utilize the following snippet:

const currentURL = window.location.pathname;

You can then apply the active class to the current item by executing this block of code:

$(".navigation-item a[href='" + currentURL + "']").parent().addClass("active");

Answer №2

When looking for a solution to selecting menu items, it is important to consider different scenarios. While @Toby Jones provides a helpful method, there are variations in how people may want to select menu items based on controllers and actions. The article referenced by Toby only addresses one specific scenario.

The TwitterBootstrapMvc library offers a solution that covers both situations using the syntax below:

@using (var nav = Html.Bootstrap().Begin(new Nav().SetLinksActiveByControllerAndAction()))
{
    @nav.ActionLink("Link 1", MVC.Account.SomeAction())
    @nav.ActionLink("Link 2", "SomeOtherAction")
}

Instead of using the 

.SetLinksActiveByControllerAndAction()
method, you could opt for the .SetLinksActiveByController() method which caters to the first scenario mentioned.

Additionally, these extension methods can also be applied to DropDowns:

@using (var dd = Html.Bootstrap().Begin(new DropDown("Some Trigger").SetLinksActiveByController()))
{
    @dd.ActionLink("Some link", "action")
}

Answer №3

If you need assistance, be sure to check out this helpful tutorial:

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

Generate a responsive list with a pop-up feature under each item (using Vue.js)

Currently, I believe that Vue may not be necessary since most tasks can be done using JavaScript and CSS. I am attempting to design a list layout as follows: [A] [B] [C] [D] When an item is clicked, the information about that specific item should ...

javascripthtmlcssvue.js

What could be causing axios to not function properly when used with async/await in this particular scenario

I need to update the DoorState when a button is clicked. After sending a request to the API to change the DoorState, I then call another API to check the status of the robot. Even though the DoorState has been successfully changed, it seems that the chan ...

javascriptreactjstypescriptnext.js

Using V-for in Vue.js to iterate over data sources

I am attempting to display all elements of an array, but currently can only show the first line due to [0]. I want to show all items in the array. <div class="description" v-for="item in sitePartVoice[0].part_attributes"> <small><strong> ...

javascriptvue.js

Troubleshooting AngularJS UI Router -> Issue with resolution when implementing ui-sref

I have successfully set up a JSON file containing my ui-routes. However, I am encountering difficulties when using the Link functionality. I have managed to use it for the following state: { "name": "home", "url": "^/home", "abstract": false, ...

javascriptangularjsweb-applicationsangular-ui-router

Tips on expanding the space between words in a scrolling "marquee" text

Looking for some assistance with my jQuery project involving a horizontal scrolling "marquee" text. I am currently trying to adjust the size of the gap between the phrases in the marquee. Here is an example with the phrase "HEY THERE". jQuery(document ...

javascripthtmljquerycss

Despite having both React and Firebase enabled, the "sign-in provider" feature appears to be disabled

Within my Authentication settings, the Sign-in Method is configured to use Email and Password as enabled. I've set up a handler for form submission that looks like this: createUser(e){ e.preventDefault(); const email = this.createEmail.value ...

javascriptreactjsfirebasecreate-react-app

Best Practices for Closing MySQL Connections in Node.js

Currently, I am working on a project using Node.js in combination with Express and MySQL. My main concern at the moment is regarding the closing of the connection to MySQL. The code snippet for this operation is provided below: iniciarSesion(correo_el ...

javascriptmysqlnode.jsexpress

The client server is unreachable when running the npm run dev command

Having recently ventured into the world of npm and JavaScript, I find myself in a situation where I am attempting to utilize an existing npm project for local testing. Upon entering the command npm run dev, both the server and client scripts are activated ...

javascriptnpmpackage.json

Determining the Existence of Undefined Values in Jquery Ajax Requests with Json

I have the following jQuery code: $.ajax({ url: "?module=gestionApplication&action=getTests&scenario="+encodeURI(scenario)+"&application="+$application, dataType:'json', success: function( data ) { $.each(data, f ...

javascriptjqueryajaxjson

What is the method to retrieve a value from a function call when a button is pressed?

Exploring the world of JavaScript, I'm currently working on a small program in React Native. My goal is to create a function SampleFunction2 that returns census data, and then render it on a FlatList when a button is pressed. Am I missing something by ...

javascriptreactjsbuttonnativeonpress

Tips for utilizing onsubmit following an ajax validation check

How can I implement the onsubmit method after an ajax check? The current onsubmit function is not working. $(document).ready(function(){ $("#p_code").change(function(){ $("#message").html("<img src='ajax_loader.gif' width='26 ...

javascriptphpjqueryajaxvalidation

What might be causing certain ajax buttons to malfunction?

There are 5 buttons displayed here and they are all functioning correctly. <button type="submit" id="submit_button1">Img1</button> <button type="submit" id="submit_button2">Img2</button> <button type="submit" id="submit_button3" ...

javascriptjqueryajax

Revealed the previously hidden private variables within the Revealing Module Pattern

I have encountered an issue while implementing the Revealing Module Pattern, as I am struggling to expose a modified private property. var myRevealingModule = (function(){ var name = 'Samantha'; function updateName () { name = ...

javascriptdesign-patternsrevealing-module-pattern

Tracking the number of form submissions on a PHP website

I am looking to add a counter feature to my website where every time a form is submitted, the count increases for all visitors. The starting number will be 0 and each form submission will increment the count. While I can manage the count using JS/jQuery w ...

javascriptphpjqueryformscounter

When utilizing a Javascript event listener within ReactJS with NextJS, the dynamically imported module without server-side rendering fails to load

Hello everyone, I am new to ReactJS and NextJS and would really appreciate some advice on the issue below. Thank you in advance! Here is my current tech stack: Node v16.6.1 React v17.0.2 Next.js v10.0.4 I'm working on implementing a carousel and si ...

javascriptreactjsnext.js

Incorporate a progress bar into the Material-UI table design

I have the following example of a Material-UI table: import React from "react"; import clsx from "clsx"; import { createStyles, lighten, makeStyles, Theme } from "@material-ui/core/styles"; import Table from "@mat ...

javascriptreactjstypescriptmaterial-uireact-typescript

Firebase's update function is causing a Promise Rejection issue

Currently, I am in the process of sending an update request from my React Native app to Firebase using the Redux framework. Below is the snippet of my Redux code: export function buyTicket(eventID) { const { currentUser } = firebase.auth(); return (d ...

javascriptreactjsfirebasefirebase-realtime-databaseredux

What is the method to enable Google Adsense to reach pages within a restricted login area that utilizes JSON authentication?

I am looking to place Google Adsense ads on my website, but I want them to only appear within a specific area that is accessible to users after they log in. Within the Google Adsense interface, I have explored the Account Settings -> Access and authori ...

javascriptjsonauthenticationadsense

Transforming jQuery into vanilla JavaScript in order to create a customized dropdown select functionality

I am struggling with converting jQuery code to pure JavaScript for a custom select element. https://codepen.io/PeterGeller/pen/wksIF After referencing the CodePen example, I attempted to implement it with 3 select elements. const select = document.get ...

javascripthtmljquery

Incorporate an image into a div element with the power of jQuery

As the user scrolls down the page, a sticky menu or floater bar appears. With the help of jQuery, I am able to apply the floater-bar class to the #menu-wrapper. My objective is to also insert an image inside an anchor tag at the same time the floater-bar ...

javascriptjqueryhtmlcss