JSFiddle - React, Tailwind, and code Playground

by muhammadaser

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>


    <a class="menu"></a>
    <a class="menu"></a>
    <a class="menu"></a>
    <a class="menu"></a>
    <a class="menu"></a>

</body>

</html>

CSS

.menu{width: 50px; height: 50px; font-size: 18px; background-color: #f90;
                border-radius:25px;position:absolute;fload:left;margin:10px;
}

JavaScript

var make_button_active = function() {
    //Get item siblings
    var siblings = ($(this).siblings());

    //Remove active class on all buttons
    siblings.each(function(index) {
        $(this).removeClass('active');
    })


    //Add the clicked button class
    $(this).addClass('active');
}

//Attach events to menu
$(document).ready(

function() {
    $(".menu li").click(make_button_active);
})