JSFiddle - React, Tailwind, and code Playground

HTML

<nav><ul>
        <li class="activebutton" ><a class="list-one-button" href="#">ITEM</a></li>
        <li><a href="#">ITEM</a></li>
        <li><a class="list-one-button" href="#">ITEM</a></li>
        <li><a href="#">ITEM</a></li>
        <li><a href="#">ITEM</a></li>
   </ul></nav>

CSS

nav ul{
	border:1px solid black;
    margin:0px;
	padding:0px;
	width:150px;
	}
nav ul li{
	border:1px solid black;
	list-style-type:none;
	height:25px;
	width:150px;
	background:url(images/sprite.png) no-repeat 5px -23px;	
	}
nav ul li a{
	border:1px solid black;
	color:#333;
	display:block;
	width:150px;
	height:26px;
	line-height:26px; /*height and line-height should be same to make the text vertically centered*/ 
	text-indent:33px;
	text-decoration:none;
}
nav ul li:hover{background-color:green;}
nav ul li.activebutton{background:red;}

JavaScript

$(function(){
	$("nav li").click(function() {
       // alert('hi');
		$("nav li").removeClass("activebutton");
		$(this).addClass("activebutton");
	});
});