CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Thomas Gijsels
Thomas Gijsels

Reputation: 71

How to remove color from div when clicking another

So I have these 3 blue circles that serve a certain navigation purpose and should remain red when clicked. When you'd click another circle the initial red one should turn blue once again and the clicked circle would then also turn red.

<html>
<head>
<style type='text/css'>

a.link {width: 15px;height: 15px;background-color:blue;border-radius: 50px;position:absolute;}
a.link:hover {background-color: red}
a.link.active {background-color: red;}

.position1 {position: absolute;top: 100px;left: 50%;margin-left: -11.5px;}
.position2 {position: absolute;top: 200px;left: 50%;margin-left: -11.5px;}
.position3 {position: absolute;top: 300px;left: 50%;margin-left: -11.5px;}

</style>
</head>

<body>
<script type='text/javascript'>
            $(function() {
               $('a.link').click(function() {
                   $('a.link').removeClass('active');
                   $(this).addClass('active');
               })
            });
         </script>

  <div class="position1"><a class="link" href="#"></a></div>
  <div class="position2"><a class="link" href="#"></a></div>
  <div class="position3"><a class="link" href="#"></a></div>
</body>
</html>

Ive done this in the past, same script, same way of working but this was by using text not custom div shapes.

I also want to make the second circle lit up red from the start by using the code .eq(1).addClass('active');

Here is a fiddle: https://jsfiddle.net/src6zf67/

Upvotes: 0

Views: 1301

Answers (2)

hyphnKnight
hyphnKnight

Reputation: 303

I hope this helps!! Good luck! Here is it in motion.

// Grab all of the links and group them as a single jQuery object.
var $links = $('a.link'); 
// Create an event that triggers when any of the of the links are clicked on.
// Pass to it a data object with a single key $links
// so you can access the other
$links.on( 'click' , { $links : $links } , function ( event ) {
    // Remove the class active from all of the links.
    event.data.$links.removeClass('active');
    // Add the class active to the link we clicked on.
    $( event.target ).addClass( 'active' );
} );

Upvotes: 0

Muhammet Arslan
Muhammet Arslan

Reputation: 985

https://jsfiddle.net/src6zf67/4/

it has been working but you should onLOad jquery

Html:

  <div class="position1"><a class="link" href="#"></a></div>
  <div class="position2"><a class="link" href="#"></a></div>
  <div class="position3"><a class="link" href="#"></a></div>

js:

        $(function() {
           $('a.link').click(function() {
               $('a.link').removeClass('active');
               $(this).addClass('active');
           })
        });

Css : 

a.link {width: 15px;height: 15px;background-color:blue;border-radius: 50px;position:absolute;}
a.link:hover {background-color: red}
a.link.active {background-color: red;}

.position1 {position: absolute;top: 100px;left: 50%;margin-left: -11.5px;}
.position2 {position: absolute;top: 200px;left: 50%;margin-left: -11.5px;}
.position3 {position: absolute;top: 300px;left: 50%;margin-left: -11.5px;}

Upvotes: 1

Related Questions