Dynamic jQuery for changing the CSS class is the way to go

Question

Dynamic jQuery for changing the CSS class is the way to go

Is there a way to dynamically change the css class of <li> elements in an ASP.NET masterpage? For example, if I click on the AboutUs.aspx link, I want to change <li class="single"> to <li class="active single"> when the page loads.

Any suggestions on how to achieve this?

 <div class="nav-collapse">
     <ul class="nav nav-pills">
           <li class="active single"><a href="Default.aspx">HOME
                 <i>company home</i>
                  </a>
            </li>
            <li class="single"><a href="AboutUs.aspx">About Us
                 <i>want to say</i>
                  </a>
            </li>

jquery asp.net css

Answer 1

Answer №1

In agreement with @scrappedcola's suggestion, there is no requirement to handle this task in Javascript as it can be easily accomplished using server side code. However, if you are determined to proceed with Javascript, the following steps should be followed:

1 Firstly, JavaScript must be informed about which item in the menu requires highlighting. Assign unique identifiers to each menu item and instruct the server side code to implement this. For example:

<li class="single home">
    <a href="Default.aspx">HOME<i>company home</i></a>
</li>
<li class="single aboutus">
    <a href="AboutUs.aspx">About Us<i>want to say</i></a>
</li>
<script>
    var activeLink = 'aboutus';
</script>

2 Next, create and invoke the Javascript/jQuery function to modify the CSS class:

$("." + activeLink).addClass("active");

Answer 2

In agreement with @scrappedcola's suggestion, there is no requirement to handle this task in Javascript as it can be easily accomplished using server side code. However, if you are determined to proceed with Javascript, the following steps should be followed:

1 Firstly, JavaScript must be informed about which item in the menu requires highlighting. Assign unique identifiers to each menu item and instruct the server side code to implement this. For example:

<li class="single home">
    <a href="Default.aspx">HOME<i>company home</i></a>
</li>
<li class="single aboutus">
    <a href="AboutUs.aspx">About Us<i>want to say</i></a>
</li>
<script>
    var activeLink = 'aboutus';
</script>

2 Next, create and invoke the Javascript/jQuery function to modify the CSS class:

$("." + activeLink).addClass("active");

Answer 3

Answer №2

When a click event is triggered on the "a" element within the list items in the navigation collapse section, the following jQuery code runs:
$('li').removeClass('.active');
$(this).parent().addClass('.active');

Answer 4

When a click event is triggered on the "a" element within the list items in the navigation collapse section, the following jQuery code runs:
$('li').removeClass('.active');
$(this).parent().addClass('.active');

Answer 5

Answer №3

Just like this:

$('div.container').on('click', function(){
    $('div').removeClass('active');
    $(this).addClass('active');
});

Check out this demo on CodePen - http://codepen.io/example/123/.

Answer 6

Just like this:

$('div.container').on('click', function(){
    $('div').removeClass('active');
    $(this).addClass('active');
});

Check out this demo on CodePen - http://codepen.io/example/123/.

Answer 7

Answer №4

When a user clicks on a link within the navigation menu, this code will remove the 'active' class from all list items in the menu and then add the 'active' class to the one that was clicked.

Answer 8

When a user clicks on a link within the navigation menu, this code will remove the 'active' class from all list items in the menu and then add the 'active' class to the one that was clicked.

Answer 9

Answer №5

 $('li.single').on('click', function(){
      $(this).toggleClass('active');
  });

or

 $('li.single').on('click', function(){
         $(this).attr('class', 'active single');
      });

Answer 10

 $('li.single').on('click', function(){
      $(this).toggleClass('active');
  });

or

 $('li.single').on('click', function(){
         $(this).attr('class', 'active single');
      });

Answer 11

Answer №6

$("ul li:first").addClass('newClass');

Make sure to adjust the selector as needed. This code will update the class for the first li element inside a ul.

Answer 12

$("ul li:first").addClass('newClass');

Make sure to adjust the selector as needed. This code will update the class for the first li element inside a ul.

Dynamic jQuery for changing the CSS class is the way to go

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

CSS: Shifting flexbox child to a new row when overflowing

Are box shadows displaying different hues across various web browsers?

Filtering elements upon loading

What new skills should I acquire following my mastery of HTML and CSS?

Refresh Subview in Subview with MVC AJAX Update

Discrepancies in Span Element Behavior Between Firefox and Chrome

What factors should be taken into account when allowing external websites to use scripts directly from your site?

What steps are involved in creating a table using Bootstrap framework?

Connect the AngularJS data model with a Foundation checkbox element

Adaptive Video Backdrops

Alignment issues with CSS3 navigation bar

Personalized cursor image using jQuery.css()

The modal window does not display a scroll bar

Issues with implementing Bootstrap Collapse functionality on dynamically generated content using Ajax

What sets apart the "RequestAuthentication()" and "VerifyAuthentication()" methods of OAuthWebSecurity in ASP.NET-Webpages with C#?

Ways to prevent the execution of JavaScript code?

Pass a jQuery value to a PHP variable

What steps can be taken to remove a server-side validation error message once the user has inputted the correct value?

Issues with playing Html 5 video arise when making an ajax call

Creating new rows in PHP form using different ID and name pairs