今天分别使用了spry和idTabs .感觉都还可以，如果配合dreamweaver cs3，那spry更方便快速。

spry使用参见css彻底研究12.3。 spry tab本身不大，css也不大。

示例:

var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");

这就行了，TabbedPanels1是个容器div,包含了tab菜单和tab内容。它是通过容器div里面第一个子节点为tab菜单，第二个子节点为tab内容。菜单与内容必须一一对应。

若要使鼠标hover时就显示tab需要在tab菜单元素上添加onmouseover="TabbedPanels1.showPanel(1)",这样写不是很好。

再来看idTabs,

它的布局和spry类似，我直接使用上面spry的结构和css,

使用示例：

$(function(){
				var ops = {
					event:'!mouseover',//when mouseover will go to that tab, default is click
					start:1, //start tab is 2nd(0 start index)
					click: function(id,list,set){
						//id  is the target id like #tab1
						//list is the target tab contents
						//set is the tab menu selector
						$('li',set).removeClass('TabbedPanelsTabSelected');
						$(this).parent().addClass('TabbedPanelsTabSelected');				
						return true;
					}
				};
				var s = $("#TabbedPanels1 ul");
				console.log(s);
				s.idTabs(ops);
			});	

此例中，选择#TabbedPanels1 ul中的a标记(这是idTabs要求的)，它只支持a标记作为菜单项，并使用href属性作为跳转目标。

我直接使用spry生成的css, 出现问题，由于idTabs是将selected样式添加到a标签上，而一般a上面的li元素也需要改变选择样式。故代码中使用javascript来处理:

$('li',set).removeClass('TabbedPanelsTabSelected'); //将其他项设置为未选中

$(this).parent().addClass('TabbedPanelsTabSelected'); //将a父元素li的样式设置为'TabbedPanelsTabSelected'

这样就行了。

插件使用很简单，主要是漂亮的样式需要设计。

这是效果图:

另外我尝试了jquery-ui的tabs,它需要引用其样式，故不很理想。