JSFiddle - React, Tailwind, and code Playground

by jaanus10

HTML

<p>This list jumps on selection change.
    <p>
        <ul class="jumpy">
            <li><a href="#">Bacon</a>
            </li>
            <li class="selected"><a href="#">Ham</a>
            </li>
            <li><a href="#">Eggs</a>
            </li>
        </ul>
        <p>This one doesn’t.</p>
        <ul class="zen">
            <li class="selected"><a href="#">Bacon</a>
            </li>
            <li><a href="#">Ham</a>
            </li>
            <li><a href="#">Eggs</a>
            </li>
        </ul>

CSS

* {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
}
a {
    text-decoration: none;
    color: #222;
}
ul {
    list-style-type: none;
    padding: 0px;
    margin: 32px 0px;
}
li {
    display: inline;
    margin: 0px 16px;
    padding: 8px;
}
.zen li {
    border: 1px solid rgba(255, 0, 0, 0);
}
li.selected {
    border: 1px solid rgba(255, 0, 0, 1);
    border-radius: 4px;
}

JavaScript

var map = Array.prototype.map;
var links = document.querySelectorAll("li > a");

map.call(links, function (link) {
    link.addEventListener("click", function (ev) {
        
        // Remove selection from previously selected item
        var item = ev.target.parentNode.parentNode.querySelector("li.selected");
        item.classList.remove("selected");
        
        // Add selection to this item
        ev.target.parentNode.classList.add("selected");
        
        ev.preventDefault();
    });
});