JSFiddle - React, Tailwind, and code Playground

by 8ogdan

HTML

<ul>
        <li>111111</li>
        <li>444444</li>
        <li class="active">888888</li>
        <li>000000</li>
        <li>777777</li>
    </ul>

CSS

body{
    text-align: center;
}*{
    margin: 0;
    padding: 0;
}
ul{
    margin-top: 50px;
}
li{
    display: inline-block;
    width: 120px;
    list-style: none;
}
li.active{
    color: red;
}

JavaScript

$(document).ready(function () {
    var nextActiveElement;
    var currentActiveElement = $("li.active").text();
    $("li").click(function (){
        nextActiveElement = $(this).text();
        $(this).text(currentActiveElement);
        currentActiveElement = nextActiveElement;
        $("li.active").text(nextActiveElement);
    });
});