From my understanding of your question, there's no native way to do
it
because your href can only do one thing -either load content (or
blurb)
from the page or ajax, or open the link in a new window. There's no
way
to do both as is because you're trying to make one href item do two
things.
However, there's an easy hack around it:
This assumes every tab needs to link to an external page- the title
attribute
is used to hold the page to go to on click. The '.tabs()' call gets
the
mouseover for blurb loading, and a separate .click() function handles
the
actual page loading.
<div id="tabs">
<ul>
<li><a href="#tab-1" title="content1.html">Preview Tab 1</a></li>
<li><a href="#tab-2" title="content2.html">Preview Tab 2</a></li>
<li><a href="#tab-3" title="content3.html">Preview Tab 3</a></li>
</ul>
<div id=tab-1>This is tab 1 preview</div>
<div id=tab-2>This is tab 2 preview</div>
<div id=tab-3>This is tab 3 preview</div>
</div>
$("#tabs").tabs({
event: 'mouseover'
});
$("#tabs > ul > li >a").click(function(){
window.location=$(this).attr('title');
});
If you don't have a title assigned for each href and you do click on
the tab, IE may complain based on your settings. If you don't need
an external link on every tab, the following will be a better way:
-----------------------------------------------
<div id="tabs">
<ul>
<li><a href="#tab-1">Regular Tab 1</a></li>
<li><a href="#tab-2" title="content1.html" class=openpage>Preview Tab
1</a></li>
<li><a href="#tab-3" title="content2.html" class=openpage>Preview Tab
2</a></li>
</ul>
<div id=tab-1>This is tab 1 content</div>
<div id=tab-2>This is tab 2 preview</div>
<div id=tab-3>This is tab 3 preview</div>
</div>
$("#tabs").tabs({
event: 'mouseover'
});
$('.openpage').click(function(){
window.location=$(this).attr('title');
});
Again, this is pretty much a hack using the title attribute in a way
some
css purists may not approve of. If you're willing to risk a visit from
the CSS
police, this will work in Firefox, IE, Chrome, and Opera.
