¿qué pasa si agregas 10 opciones y querés que hagan ese efecto? vas a tener que agregar como 50 lineas de código que van a hacer lo mismo, te conviene hacer usando convenciones como agregando como clase de un div el id del li relacionado entonces cuando hacen click en la lista o en el enlace recuperas el id y usas eso para mostrar el div con clase que recuperaste, creo que no se entiende leyendo, por ej:
Código HTML:
<html>
<head>
<title>Ejemplo</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<script type="text/javascript">
$( function (){
//aca argego a un div la clase visible solo para que se ejecute la funcion slideUp
$('#contenido div:eq(0)').addClass('visible');
$('#menu a.evento').click(function(){
//recupero el id del enlace clickeado
clase = $(this).attr('id');
//Al div que tiene la clase visible lo oculto y le saco la clase visible
$('#contenido div.visible').removeClass('visible').slideUp('slow', function (){
//muestro el div que tenga la clase...eeeh lo que tenga la variable clase y le agrego la clase visible
$('#contenido div.'+clase).slideDown().addClass('visible');
});
});
});
</script>
<style>
#contenido>div{display:none; height:100px; width:100px}
.uno{background-color:red}
.dos{background-color:green}
.tres{background-color:blue}
</style>
<body>
<ul id="menu">
<li><a href="#">No hace nada</a></li>
<li><a href="#" class="evento" id="uno">Uno</a></li>
<li><a href="#" class="evento" id="dos">Dos</a></li>
<li><a href="#">No hace nada</a></li>
<li><a href="#" class="evento" id="tres">Tres</a></li>
<li><a href="#">No hace nada</a></li>
</ul>
<div id="contenido">
<div class="uno">contenido link uno</div>
<div class="dos">contenido link dos</div>
<div class="tres">contenido link tres</div>
</div>
</body>
</html> la convención en ese caso va a ser que el div se relaciona con el enlace mediante el id del link y la clase del div
otra también pero menos flexible es usando el indice pero tiene que estar relacionado y en orden todos los links con los div
link 1
link 2
link 3
contenido 1
contenido 2
contenido 3
asi cuando el click es es link con indice 2 muestro el div con indice 2
Código HTML:
<html>
<head>
<title>Ejemplo</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<script type="text/javascript">
$( function (){
li = $('#menu li');
$('#contenido div:eq(0)').addClass('visible');
li.click(function(){
indice = li.index( $(this) );
$('#contenido div.visible').removeClass('visible').slideUp('slow', function (){
$('#contenido div:eq('+indice+')').slideDown().addClass('visible');
});
});
});
</script>
<style>
#contenido>div{display:none; height:100px; width:100px}
.rojo{background-color:red}
.verde{background-color:green}
.azul{background-color:blue}
</style>
<body>
<ul id="menu">
<li><a href="#">Uno</a></li>
<li><a href="#">Dos</a></li>
<li><a href="#">Tres</a></li>
</ul>
<div id="contenido">
<div class="rojo">contenido uno</div>
<div class="verde">contenido dos</div>
<div class="azul">contenido tres</div>
</div>
</body>
</html>