ajax标签tabs效果

更新时间：2007-12-13参与评论

解释：

ul的id="maintab"是必需的，因为后面AJAX效果调用要根据这个ID来查找对象，所以后面还有一句startajaxtabs("maintab"),这里面就是调用的UL的ID。

li的class="selected"代表当前选中状态。selected也是必需的，最好不要随便改其它名字，如果要改的话，相应JS里面的设置也要改。

A标签里面的href属性代表要加载的HTML地址（#default代表容器默认的内容。），rel属性代表加载到的HTML内容显示在对象ID为该属性值的容器里。rev属性代表把该对象应用到HTML上并显示。

同时该JS还提供了一个额外的方法让我们操纵标签：expandtab(tabcontentid, tabnumber)

<A href="javascript:expandtab(maintab, 2)">显示maintab的第3个标签的内容</a>

因为数组都是从0开始统计，所以2就代表第3个。

多个AJAX标签对象只需要在startajaxtabs("maintab")后面加上相应的UL 的ID即可。

例如：

<ul id="maintab" class="shadetabs">
<li><a href="external.htm" rel="ajaxcontentarea">Bird</a></li>
<li><a href="external2.htm" rel="ajaxcontentarea">Dog</a></li>
</ul>
<div id="ajaxcontentarea" class="contentstyle">
<p>Default Content...</p>
</div>
<ul id="newstab" class="shadetabs">
<li><a href="local.htm" rel="newscontentarea">Local</a></li>
<li><a href="world.htm" rel="newscontentarea">World</a></li>
</ul>
<div id="newscontentarea" class="contentstyle">
<p>Default Content...</p>
</div>
<script type="text/javascript">
startajaxtabs("maintab", "newstab")
</script>

代码示例下载地址：http://minado008.host.2wcn.com/demo/ajaxtabscontent.rar