Ejemplos de contenido oculto en JS con países relacionados

<!-- LISTA DE TABULACIONES PARA HACER CLICK
<ul id="listTabs">
	<li data-tab="1" class="seleccionada">Opcion 1</li>
	<li data-tab="2">Opcion 2</li>
	<li data-tab="3">Opcion 3</li>
</ul>


<!-- CONTENIDO DE LA PAGINA -->
<div id="tabContent">
    <div id="opcion1" class="tabBox">
        Contenido de la opcion 1 - un poco mas de texto para que se note el cambio
    </div>
    
    <div id="opcion2" class="tabBox">
        Contenido de la opcion 2 - mas texto haciendo que el cambio se note al seleccio
    </div>
    
    <div id="opcion3" class="tabBox">
        Contenido de la opcion 3 -   Otro texto para mostrarl en la opcion 3      
    </div>
</div>

$(document).ready(function(e) {
	
	// capturamos el evento clic sobre la lista #listTabs
	$('#listTabs li').click(function()
	{
		
		// leemos el atributo data-tab para saber de que elemento se trata
		var tab_this = $(this).attr('data-tab');
		
		// ocultamos todas las cajas del contenido antes de mostrar la correcta
		$('.tabBox').hide();
		
		// mostramos la caja adecuada dependiendo del atributo data-tab
		// lo que hemos guardado en la variable de arriba (tab_this)
		$('#opcion'+tab_this).show();
		
		// cambiamos de clase para resaltar la opcion seleccionada en la 1º lista
		$('#listTabs li').removeClass('seleccionada');
		
		// agregamos la clase al elemento sobre el que hemos hecho click.
		$(this).addClass('seleccionada');
		
	});
});

#listTabs li{
	display:inline;
	margin-right:15px;
	cursor:pointer;
}
#listTabs li:hover{
	text-decoration:underline;
}
.seleccionada{
	font-weight:bold
}
.tabBox{
	border:1px solid #cacaca;
	margin:20px 0;
	padding:20px;
	font-weight:bold;
	font-size:18px;
	width:250px;
}
#opcion2,#opcion3{
	display:none;
}