Mostrar pestañas con Jquery

[carlos2]

Muchas gracias, Nekko.... ya lo he resuelto.. y todo con tu ayuda!! De verdad que muchas gracias.... voy a dejar aquí el resultado final, por si a alguien le puede ayudar en el futuro...

Por un lado tengo el HTML, con el contenido, añadido en el post. Así

Código:

<div id="contenido_pestanas">
    <ul>
        <li><a href="#opcion1" title="Opción 1">Opción 1 &raquo;</a></li>
        <li><a href="#opcion2" title="Opción 2">Opción 2 &raquo;</a></li>
        <li><a href="#opcion3" title="Opción 3">Opción 3 &raquo;</a></li>
        <li><a href="#opcion4" title="Opción 4">Opción 4 &raquo;</a></li>
    </ul>

    <div id="opcion1">
        <h3>Este es el contenido de la Opci&oacute;n 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.</p>
    </div>
    <div id="opcion2">
        <h3>Este es el contenido de la Opci&oacute;n 2</h3>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
    <div id="opcion3">
        <h3>Este es el contenido de la Opci&oacute;n 3</h3>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="opcion4">
        <h3>Este es el contenido de la Opci&oacute;n 4</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</div>

Por otro lado cargo el jquery. Lo hago desde la página functions.php. No es necesario poner la etiqueta <script>. Lo tengo así:

Código:

function mi_inicio() {
	if (!is_admin()) {
		// comment out the next two lines to load the local copy of jQuery
		wp_deregister_script('jquery');
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'mi_inicio');

Y por último la función necesaria para mostrar y ocultar el contenido de las pestañas. Esto lo tengo puesto en la página footer.php, justo antes de la etiqueta </body>. Aquí sí es necesario poner la etiqueta <script>. Lo tengo así puesto:

Código:

<script  type="text/javascript">
    (function($) {
        $(document).ready(function(){ // Script del menú con pestañas
        $('#contenido_pestanas div').css('position', 'absolute').not(':first').hide();
        $('#contenido_pestanas ul li:first a').addClass('aqui');
        $('#contenido_pestanas a').click(function(){
           $('#contenido_pestanas a').removeClass('aqui');
           $(this).addClass('aqui');
           $('#contenido_pestanas div').fadeOut(350).filter(this.hash).fadeIn(350);
           return false;
 
         });
       });
    })(jQuery);
</script>

Y con esto todo funciona perfectamente. No se si hay alguna forma mejor de hacerlo, pero a mi me funciona así. Creo que el problema lo estaba teniendo a la hora de ubicar los códigos en los sitios adecuados, sobre todo el que carga el jquery. Muchas gracias a Nekko por su ayuda! Espero que esto le sirva a alguien en el futuro!

Un saludo a todos!