JSFiddle - React, Tailwind, and code Playground

by kohei horiguchi

HTML

<body>

<ul id="ulParent">
	<li id="one" class="active">1</li>
	<li id="two">2</li>
	<li id="three">3</li>
	<li id="four">4</li>
	<li id="five">5</li>
</ul>

</body>

CSS

ul#ulParent {

	}

	ul#ulParent > li {
		width: 100px;
		padding: 20px;
		list-style: none;
		text-decoration: none;
		text-align: center;
		background-color: #eee;
		float: left;
		margin-left: 5px;
	}

	ul#ulParent > li:hover {
		background-color: #2e2e2e;
		color: #FFF;
	}

JavaScript

jQuery(function(){

	jQuery("#ulParent").click(function(e){
		alert(e.target.id);
		alert(e.target.className);
	});
});