What is a more sophisticated approach to adding css to "every element except this one"?

Question

What is a more sophisticated approach to adding css to "every element except this one"?

I am currently using html/jQuery to create tabbed navigation on my website. I have managed to make the selected tab appear active by adding a CSS class "active" and changing the previous tabs to have an "inactive" class. In order to achieve this, I have included the following code in my click event:

$("ul.tabs li").removeClass("active"); //Remove any "active" class
$("ul.tabs li").addClass("inactive");  //Set all to "inactive"
$(this).removeClass("inactive");  //remove "inactive" from the item that was clicked
$(this).addClass("active"); //Add "active" class to the item that was clicked.

Although this method works, I am interested in hearing if there is a more efficient or cleaner approach to accomplishing the same result?

javascript jquery html css

Answer 1

Answer №1

$(document).ready(function(){
    $("ul.tabs li").on("click", function(){
        $(".active").toggleClass("active inactive");
        $(this).toggleClass("inactive active");
    });
});

Check out the live demo here: http://jsfiddle.net/1dJWz/

Answer 2

$(document).ready(function(){
    $("ul.tabs li").on("click", function(){
        $(".active").toggleClass("active inactive");
        $(this).toggleClass("inactive active");
    });
});

Check out the live demo here: http://jsfiddle.net/1dJWz/

Answer 3

Answer №2

What is the reason for not setting the inactive style as the default style? In this case, you could simply use the following code:

$("ul.tabs li").removeClass("active");
$(this).addClass("active");

Answer 4

What is the reason for not setting the inactive style as the default style? In this case, you could simply use the following code:

$("ul.tabs li").removeClass("active");
$(this).addClass("active");

Answer 5

Answer №3

$(this).removeClass("inactive").addClass("active").siblings().removeClass("active").addClass("inactive");

Keep in mind that it is advised to avoid using $('ul.tabs li') within an element's click event. This way, when dealing with multiple .tabs, only the one related to the clicked element will be affected.

Alternatively, it is recommended to implement CSS rules to eliminate the necessity of the inactive class, as shown below:

ul.tabs li {…} /* Inactive state */
ul.tabs li.active {…} /* Active state */

Answer 6

$(this).removeClass("inactive").addClass("active").siblings().removeClass("active").addClass("inactive");

Keep in mind that it is advised to avoid using $('ul.tabs li') within an element's click event. This way, when dealing with multiple .tabs, only the one related to the clicked element will be affected.

Alternatively, it is recommended to implement CSS rules to eliminate the necessity of the inactive class, as shown below:

ul.tabs li {…} /* Inactive state */
ul.tabs li.active {…} /* Active state */

Answer 7

Answer №4

Have you thought about targeting elements with the specified class and removing it that way? You can condense the process into just two lines:

$('.active').removeClass('active').addClass('inactive');
$(this).addClass('active').removeClass('inactive');

Answer 8

Have you thought about targeting elements with the specified class and removing it that way? You can condense the process into just two lines:

$('.active').removeClass('active').addClass('inactive');
$(this).addClass('active').removeClass('inactive');

Answer 9

Answer №5

This method ensures the selectors are only evaluated once.

$("ul.tabs li").removeClass("active").addClass("inactive");
$(this).removeClass("inactive").addClass("active");

I concur with the previous suggestions, it would be more efficient to eliminate the inactive class altogether. Set the default tab styling to "inactive" and toggle the active class as needed. Place the CSS for the "active" class after the base CSS for the tabs so that it takes precedence over the default state. With this approach, your code simplifies to:

$("ul.tabs li.active").removeClass("active");
$(this).addClass("active");

Answer 10

This method ensures the selectors are only evaluated once.

$("ul.tabs li").removeClass("active").addClass("inactive");
$(this).removeClass("inactive").addClass("active");

I concur with the previous suggestions, it would be more efficient to eliminate the inactive class altogether. Set the default tab styling to "inactive" and toggle the active class as needed. Place the CSS for the "active" class after the base CSS for the tabs so that it takes precedence over the default state. With this approach, your code simplifies to:

$("ul.tabs li.active").removeClass("active");
$(this).addClass("active");

Answer 11

Answer №6

Opting for :not() proves to be significantly speedier than using .not(). In place of repeatedly adding and removing classes, consider employing jQuery's toggleClass() method. Here is how your code snippet should look:

    $("ul.tabs li:not(" + $(this) + ")").toggleClass("active", "inactive");
$(this).addClass('active');

Answer 12

Opting for :not() proves to be significantly speedier than using .not(). In place of repeatedly adding and removing classes, consider employing jQuery's toggleClass() method. Here is how your code snippet should look:

    $("ul.tabs li:not(" + $(this) + ")").toggleClass("active", "inactive");
$(this).addClass('active');

What is a more sophisticated approach to adding css to "every element except this one"?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Cause the browser icon to flash in the taskbar when a notification is received

The generation of noisy URLs with hidden inputs is caused by the checkboxes in Thymeleaf Spring forms

Unit tests in Vue 3 do not utilize configureWebpack in vue.config.js

What is the best way to add color to the "ngx-star-rating" component?

How to run JavaScript code in Robot Framework using Selenium2Library

Adding padding-top to the h1 element within a vertically aligned div

"Challenges encountered when using map function to dynamically fill select dropdowns in React with Material UI

Issue with Vue Router not rendering components after dynamically importing them

How to style a form using Django and jQuery

Combining numerous done() callbacks to a single deferred promise

How to enhance MVC form validation across multiple tabs by automatically navigating to the tab containing validation errors?

What could be causing the distance between the image and the navigation bar?

Exploring the methods for retrieving and setting values with app.set() and app.get()

Plot the highest-ranked outcomes based on a search using Google Maps

VueJS: Even when disabled, clicking a button can still navigate to a different

How can I dynamically toggle the visibility of a dynamically generated <div> in Angular 8 based on its id?

Issue with React component not reflecting updated state following Axios call

Is the value being sent correctly from my jQuery to the controller?

Prioritizing tasks, always giving a call once they are completed

IE and Chrome are experiencing issues where the radio buttons are disappearing