How do you make a Jquery Tab both mouseover and yet click to open the page?

Question

it wont let me submit more than one link, so please use your imagination, i need multiple tabs with mutliple mouse overs or images so that thing in the middle is an image

<script type="text/javascript">
$(function() {
$("#tabs").tabs({event: 'mouseover'}).addClass('ui-tabs-vertical ui-helper-clearfix');
$("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-right');
$('.openpage').click(function(){
  window.location=$(this).attr('title');
    });
});
</script>

<div id="tabs">
<ul>
<li><a href="#tabs-1" title="content1.html" class="openpage">content1</a></li>
</ul>
<div id="tabs-1"><imgimg src="/images/1.jpg" alt=""></div> 
</div>

Answer 1

This code is taken from jQuery Docs.

HTML code. Note that I've added classes for tabs.

<div id="tabs">
    <ul>
        <li class="tab1"><a href="#fragment-1"><span>One</span></a></li>
        <li class="tab2"><a href="#fragment-2"><span>Two</span></a></li>
        <li class="tab3"><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1">
        <p>First tab is active by default:</p>
        <pre><code>$('#example').tabs();</code></pre>
    </div>
    <div id="fragment-2">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div id="fragment-3">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>

Now, if you want to add multiple effects on tabs, all you have to do is the following:

  $(document).ready(function(){
    $("#tabs").tabs();
    $("#tabs .tab1").click(function() { alert('hello world'); });
  });

I've not tested this, but I think it should work.