jQuery很久以前就开始学习，但是只看完了选择器就丢下了。最近找来了《锋利的jQuery》来看，感觉还不错，看得比之前认真。刚看完了选择器和动画，自己动手做了个tab。demo

jQuery中的动画效果只要是通过更改元素的位置、大小以及透明度来实现的。

代码：

// jQuery tab

$(function(){ //页面初始化时 获得激活的tab的索引 var index = $('div.tab_header').index($('div.header_highlight')); //显示激活的tab对应的content内容 $('div.tab_content').eq(index).slideDown('fast'); //为tab添加click事件 $('div.tab_header').click(function(){ //点击的tab已经 被激活，结束 if ($(this).is('.header_highlight')) { return; } //判断激活的tab是否正处于对话中 if (!$('div.header_highlight').is(':animated')) { //更新tab样式 $('div.header_highlight').removeClass('header_highlight'); $(this).addClass('header_highlight'); //获得激活的tab的索引 var index = $('div.tab_header').index($(this)); $('div.tab_content:visible').slideUp('fast'); $('div.tab_content').eq(index).slideDown('fast'); } }); })

这只是一个简单的例子，还会继续学习，下一个例子要做多级菜单。

Related Posts