使用jQuery实现Tab页效果

最新推荐文章于 2024-09-16 14:31:24 发布

原创最新推荐文章于 2024-09-16 14:31:24 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #div #class #function #float

javascript & ajax & jQuery 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个简单的Tab切换效果实现方案，使用HTML和JavaScript完成页面布局和交互逻辑，通过设置不同的CSS样式来展示或隐藏Tab内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

</div>

.other, .current {
   width:50px;
   margin:1px 1px;
}
.current {
   background-color:#663300;
}
.hidden {
   display:none;
}
.show {
   display:block;
}

    $('#tabContentContainer > div').attr('class', 'hidden');   // 全部Tab内容不显示
   $('#tabContentContainer > div:first').attr({'class':'show'}); // 显示第一个Tab内容

   $('#tabContainer > div:first').attr('class', 'current');             // 设置第一个Tab为current
   $('#tabContainer > div').each(function(n) {                        // 遍历所有子div控件
       $(this).click(function() {
           $('#tabContainer > div').attr({'class':'other'});             // 所有Tab都设置为other
           $(this).attr('class','current');                                        // 当前Tab设置为current
           $('#tabContentContainer > div').each(function(n) {    // 遍历设置所有的Tab内容不显示
               $(this).attr('class','hidden');
           });
           $('#'+this.id+'_con').attr('class','show');                      // 显示当前的Tab对应的内容
       });
   })
})
</script>