JSFiddle - React, Tailwind, and code Playground

by okke

HTML

<ul>
<li class="i1"><a href="#item1">1</a></li>
<li class="i2"><a class="active" href="#item2">2</a></li>
<li class="i3"><a href="#item3">3</a></li>
<li class="i4"><a href="#item4">4</a></li>
<li class="i5"><a href="#item5">5</a></li>
</ul>
<p id="debug">item2</p>

CSS

ul { width: 350px; height: 150px; background: orange; }
li { width: 25px; height: 25px; position: absolute; outline: 1px solid black; }
li a { display: block; width: 25px; height: 25px; }
.i1 { top: 50px; left: 50px; background: red; }
.i2 { top: 25px; left: 100px; background: orange; }
.i3 { top: 10px; left: 150px; background: yellow; }
.i4 { top: 25px; left: 200px; background: lime; }
.i5 { top: 50px; left: 250px; background: green; }
.item1 { background: red; }
.item2 { background: orange; }
.item3 { background: yellow; }
.item4 { background: lime; }
.item5 { background: green; }

JavaScript

$('ul').each(function(){
    var $ul = $(this); // cache
    $ul.find('li a').each(function(){
        var $i = $(this); // cache
        $i.click(function(e){
            e.preventDefault();
            var $this = $(this);
            var newclass = $this.attr('href').replace('#','');
            if ($this.hasClass('active')) {
                // clicked item is active; do nothing
            } else {
                $('.active').removeClass('active');
                $this.addClass('active');
                setActive($this.attr('href'));
            }
        });
        $i.hover(
            function(){ // mouse over
                setActive($(this).attr('href'));
            },
            function(){ // mouse out
                setActive($('.active').attr('href'));                
            }
        )
    });
});
 
function setActive(target) {
    target = target.replace('#','');
    $('#debug').text(target);
    $('ul').removeClass('item1 item2 item3 item4 item5'); 
    // would be better to select parent UL of $this 
    // and remove all classes EXCEPT the 'new active one'
    // but wel.. 
    $('ul').addClass(target);
}