当前位置:首页 > 转自点点  >> jQuery 实现网页选项卡
15日

jQuery 实现网页选项卡

作者:皇家元林 时间:2010年09月15日 围观者: 108 人 【0条评论】

很多网站都有使用网页选项卡,最常见的就是博客的侧边栏上,比如把最新文章、随机文章、最受欢迎文章三项集成一栏,然后用选项卡的方式展现出来,节省空间,方便访问者浏览。于是就想到要自己写个 jQuery 代码来实现。
HTML 和 CSS 代码这里略过,可以查看Demo。jQuery 代码如下:

jQuery(function($) {
    //给当前要显示的标题添加类 selected,然后在它后面插入其他项的标题。
    $('.tab_fst h2').addClass('selected').after($('.tab_sec h2'), $('.tab_trd h2'));
    //把其他选项的内容插到第一个选项的内容的后面并隐藏。
    $('.tab_content:gt(0)').insertAfter('.tab_content:eq(0)').hide();
    //上面代码执行后,会留下两个空的 div,用 .remove() 方法删掉。
    $('.tab_sec, .tab_trd').remove();
    //首先给选项卡的标题增加类 title,以便我们修改美化标题栏的样式;
    //然后添加点击每个标题的效果。
    $('.tab_fst h2').addClass('title').click(function() {
        //给被点击的标题添加类 selected,并移除其他标题项的 selected 类。
        $(this).addClass('selected').siblings().removeClass('selected');
        //因为每个标题 h2 对应着相应的内容 tab_content,所以用变量 i 获取 h2 的索引
        var i = $('.tab_fst h2').index(this);
        //让被点击选项的内容显示,隐藏其他项。
        $('.tab_content').eq(i).fadeIn('slow').siblings(".tab_content").hide();
    });
});

如果第一项后面有很多项,而你只想实现三个选项卡,那

$('.tab_content:gt(0)')

这里就要改一下。
转自http://www.alanoy.com/jquery-tab/

标签:, ,

Leave a Reply



3392