JSFiddle - React, Tailwind, and code Playground

by Francklin Costa

HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
	<script>
$(document).ready(function(){
	
	$(".muda1").click(function(){
			$(".cont2").hide();
			$(".cont3").hide();
			$(".cont1").delay("slow").show();
	});
	$(".muda2").click(function(){
			$(".cont1").hide();
			$(".cont3").hide();
			$(".cont2").delay("slow").show();
	});
	$(".muda3").click(function(){
			$(".cont1").hide();
			$(".cont2").hide();
			$(".cont3").delay("slow").show();
	});
});
	</script>

	<title></title>
</head>
<body>
	<table>
	<tr>
		<ul>
			<li><a href="#" class="muda1">conteudo 1 </a></li>
			<li><a href="#" class="muda2">conteudo 2 </a></li>
			<li><a href="#" class="muda3">conteudo 3 </a></li>
		</ul>
	</tr>
		<tr class="cont1">
			<td>conteudo 1 conteudo 1 conteudo 1 </td>
		</tr>
		<tr class="cont2">
			<td>conteudo 2 conteudo 2 conteudo 2 </td>
		</tr>
		<tr class="cont3">
			<td>conteudo 3 conteudo 3 conteudo 3 </td>
		</tr>
	</table>

</html>

CSS

ul li{
		display: inline;
	}
	table{
		border: solid 1px; 
	}
	.cont1{
		display: none;
	}
	.cont2{
		display: block;
	}
	.cont3{
		display: none;
	}