Navigating using JavaScript dot notation is a powerful way to

Question

Navigating using JavaScript dot notation is a powerful way to

Is there a way to implement JavaScript or jQuery code that will assign an active class to a dot when it is clicked, while also removing the active class from any other dots in the sequence?

HTML:

<div class="dotnav">
    <div class="dot active" title="Sign Up"></div>
    <div class="dot" title="hello"></div>
    <div class="dot" title="hello"></div>
    <div class="dot" title="hello"></div>
    <div class="dot" title="hello"></div>
    <div class="dot" title="helloup"></div>
</div>

CSS:

.dotnav {
    left: 40px;
    position: absolute;
    top: 50%;
    z-index: 9999;
    display: block;
}

.dot {
    width: 16px;
    height: 16px;
    border-radius: 100%;
    border: 2px solid #CCCCCC;
    display: block;
    margin-top: 10px;
    cursor: pointer;
}

.dot:hover {
    border: 2px solid #999999;
    background-color: #C9931E;
}

.active {
    background-color: #C9931E;
}

Looking for a solution using JavaScript or jQuery where clicking on a dot assigns it the active class and removes the previous dots' active classes.

javascript jquery css html

Answer 1

Answer №1

$('.circle').click(function() {
    $('.circle.active').toggleClass('active');
    $(this).toggleClass('active');
});

Answer 2

$('.circle').click(function() {
    $('.circle.active').toggleClass('active');
    $(this).toggleClass('active');
});

Answer 3

Answer №2

Here is a simple solution for achieving that:

$('.dot').on('click', function(){
    $(this).addClass('active');
});

Demo Link

Answer 4

Here is a simple solution for achieving that:

$('.dot').on('click', function(){
    $(this).addClass('active');
});

Demo Link

Answer 5

Answer №3

When you click on a dot, this code will remove the active class from any currently active dots and then add the active class to the clicked dot. Here is an example:

$('.dot').click(function () {
    $('div.active').removeClass('active');
    $(this).toggleClass('active');
});

Check out this demonstration on jsFiddle.

Answer 6

When you click on a dot, this code will remove the active class from any currently active dots and then add the active class to the clicked dot. Here is an example:

$('.dot').click(function () {
    $('div.active').removeClass('active');
    $(this).toggleClass('active');
});

Check out this demonstration on jsFiddle.

Answer 7

Answer №4

// To enhance readability in complex code, use on() instead of click(); and namespace your events.
// Always remember to namespace your events for better organization.
// It's a good practice to pass the event to your anonymous function to save time if patterns are the same.
$('.dot').on('click.dot', function(e){
  // Quickly remove 'active' class from all sibling elements with a single line of code
  // This way, other 'dot' structures remain unaffected
  // If you want multiple elements to sync their behavior, consider using data-attributes to synchronize them (a new challenge for you)
  $(this).siblings('.dot').removeClass('active');
  // Now, add the 'active' class to the currently clicked element
  $(this).addClass('active');
})

Explore your original HTML and CSS on jFiddle: http://jsfiddle.net/q5p6fj5y/1/

Answer 8

// To enhance readability in complex code, use on() instead of click(); and namespace your events.
// Always remember to namespace your events for better organization.
// It's a good practice to pass the event to your anonymous function to save time if patterns are the same.
$('.dot').on('click.dot', function(e){
  // Quickly remove 'active' class from all sibling elements with a single line of code
  // This way, other 'dot' structures remain unaffected
  // If you want multiple elements to sync their behavior, consider using data-attributes to synchronize them (a new challenge for you)
  $(this).siblings('.dot').removeClass('active');
  // Now, add the 'active' class to the currently clicked element
  $(this).addClass('active');
})

Explore your original HTML and CSS on jFiddle: http://jsfiddle.net/q5p6fj5y/1/

Navigating using JavaScript dot notation is a powerful way to

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Implementing Nodejs middleware across multiple files

Replace the text in a different Div

Issue encountered: Component returning nothing error in a Next.js/React application

Transitioning between modals using Tabler/Bootstrap components in a ReactJS environment

Ways to extract text from a temporary element

Utilizing the Page Method to Handle Warnings in $.ajax({}) Calls

How can I trigger $stateChangeStart in Angular ui-router when using state.go({notify:false})?

Is Height Responsiveness a feature?

Activating the submit button only following confirmation that the image dimensions have been verified

Sorting in Postgres is about organizing data in a specific order

Adjust the size of the div based on a percentage of the header div

"Enhancing User Experience with Animated Progress Bars in Three.js

Addressing Memory Leakage Issues in a Basic Node.js Application

Is it possible to load the content before loading the corresponding images?

Dynamic classroom experience featuring a bootstrap sidebar

I am looking to implement datepicker options to define the minimum and maximum dates within a specific method

Is it possible to create a dynamic jQuery dialog that appears after appending data without the need to reload the

At what point does a box create an inline formatting context?

Bringing in a created class establishes the universal prototype

Use C# to set the Message.Body to be an HTML file