tab动态切换JS代码hover

最新推荐文章于 2023-03-13 09:33:13 发布

原创最新推荐文章于 2023-03-13 09:33:13 发布 · 835 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #css #html #前端

jquery 同时被 2 个专栏收录

2 篇文章

订阅专栏

div+css

2 篇文章

订阅专栏

本文介绍使用 jQuery 实现 tab 切换效果的方法，包括如何获取当前元素的索引、添加或移除 CSS 类以及控制元素的显示与隐藏。通过具体示例代码展示了 hover 事件在实现 tab 功能中的应用。

一、用到的函数

一般在hover里编写切换代码

$('').hover(function(){

})

二、常用的代码：

1、取得当前元素的index

代码示例：index = $('.tab-h3-item').index($(this));

2、添加或去掉css

代码示例：

$('.tab-h3-home').removeClass('sel');
$(this).addClass('sel');

3、隐藏或显示元素或DIV块

$('.tn-list').hide();
$('#list'+index).show();

三、完整的代码示例：

$('.tab-h3-item').hover(function(){
           index = $('.tab-h3-item').index($(this));

           //选中当前tab

           $('.tab-h3-item').removeClass('sel');
           $('.tab-h3-home').removeClass('sel');
           $(this).addClass('sel');

           $('.tn-list').hide();
           $('#list'+index).show();
       },function(){

})

   $('.tab-h3-home').hover(function(){
           //选中当前tab
           $('.tab-h3-item').removeClass('sel');
           $('.tab-h3-home').removeClass('sel');
           $(this).addClass('sel');

           $('.tn-list').hide();
           $('#list').show();
       },function(){

})