How do I use jQuery UI tabs in a WordPress page?

I want to use jQuery UI tabs in my WordPress 3.1.4 pages. I write programming tutorials for a VB .NET audience but like to provide C# source as well, and I want to use the tabs to let the readers switch between the two. I could probably make my own given time, but this was supposed to be a “learn things about jQuery” project. It’s turning out to be more of a “WTF WordPress” project. I’m barely functional in JS and trying to correct that. I’m no WP guru, and don’t care to learn more than I need to know yet.

I’ve got a page that is nothing but a copy/paste of the jQuery UI Tabs demo. It doesn’t work; the list and all divs are visible and there’s no actual tabs. I know this is because I need some CSS, but this is where I got exhausted. I’m not confident having the CSS will make it work anymore, and I don’t even know how to tell if it’s the CSS, my JS, or my WP that’s the problem. Until I started this project my blog “just worked” and that’s how I like my not-work things.

The first thing I tried was putting the Google CDN for jQuery in my theme’s header.php. I could get alerts working, but no matter what I did the tabs didn’t show up. (I know now this is because I apparently needed some CSS. Thanks for not mentioning that jQuery documentation!) So I started doing some reasearch and realized that WP loads jQuery, as do many plugins (though I’m running only Spam Karma and Askimet.) It made sense that maybe loading the Google jQuery caused some confusion. After some research, I found several sites that suggested putting wp_enqueue_script() in my header. The documentation listed a bunch of scripts, so I added “jquery”, “jquery-ui-core”, and “jquery-ui-tabs”. I can see a script tag loading jQuery (version 1.4.4…) in my header, but the other tags seem to have no effect. I understand it’s loaded in “no conflict” mode so you use “jQuery()” when you’d normally use “$()”. I can get alerts working but not the tabs. Again, I’m suspicious because it doesn’t look like my page is trying to load jQuery UI at all. It probably wouldn’t matter because I’m not sure if WP comes with the right CSS. I’ve seen a few pages that suggest I have to load jQuery UI in the page’s footer, others that claim I need to add some stuff I don’t understand to functions.php, and a couple of other solutions from articles too old to trust. I don’t know what to try next.

If I did some work to figure out what CSS I need (thanks again, jQuery “documentation”!) I could get tabs working on a local file. In WP, I’m using the TwentyTen theme; my only modifications have been to add the SyntaxHighlighter scripts (which I’ll disable if someone can tell me I’m close enough it should be working and they may be the problem.) I just upgraded to WP 3.1.4 today. Here’s the contents of relevant files, you can view source to see what the HTML looks like:

header.php

<?php wp_enqueue_script("jquery"); ?>
<?php wp_enqueue_script("jquery-ui-core"); ?>
<?php wp_enqueue_script("jquery-ui-tabs"); ?>
<script type="text/javascript" src="http://www.owenpellegrin.com/blog/highlight/scripts/shCore.js"></script>
<script type="text/javascript" src="http://www.owenpellegrin.com/blog/highlight/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="http://www.owenpellegrin.com/blog/highlight/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="http://www.owenpellegrin.com/blog/highlight/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://www.owenpellegrin.com/blog/highlight/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://www.owenpellegrin.com/blog/highlight/styles/shThemeDefault.css"/>
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
(... the rest of the default TwentyTen header.php ...)

the linked page

<script>
jQuery("document").ready(function() {
    jQuery( "#tabs" ).tabs();
});
</script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>Tab 1 content.</p>
    </div>
    <div id="tabs-2">
        <p>Tab 2 content</p>
    </div>
    <div id="tabs-3">
        <p>Tab 3 content</p>
    </div>
</div>

I added the ready() call because I was curious if perhaps the code from the demo wasn’t running. I’ve also tried this variant of the code with no joy:

jQuery("document").ready(function() {
    jQuery( "#tabs" ).tabs();
});

What am I missing?