tab动态切换JS代码hover

本文主要是介绍tab动态切换JS代码hover，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、用到的函数

一般在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(){

    })

这篇关于tab动态切换JS代码hover的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---