乱世浮生

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

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

• hide/show方法通过改变元素的hight、width两个属性值来实现元素的隐藏和现实
• slideUp/slideDown实现的是一种卷帘的效果，实现的方法是改变元素的height属性值
• fadeOut/fadeIn方法是改变元素的透明度
• animate则比较全面，可以根据需要从不同角度来实现动画交过，而上面的三个方法的效果都可以通过animate来实现

代码：

// 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');
        }
    });
})

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