js切换换class

最新推荐文章于 2026-03-12 17:00:08 发布

原创最新推荐文章于 2026-03-12 17:00:08 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文提供了两种实现Tab切换效果的方法：一种使用纯JavaScript通过修改元素的class和display属性来完成，另一种利用jQuery简化DOM操作，增强用户体验。这两种方法都实现了当鼠标悬停于不同的Tab时显示相应的内容并更改样式。

1，

function ntabs(thisObj,Num)
            {if(thisObj.className == "active")return;
            var tabObj = thisObj.parentNode.id;
            var tabList = document.getElementById(tabObj).getElementsByTagName("li");
            for(i=0; i <tabList.length; i++)
                {if (i == Num)
                    {thisObj.className = "active";
                    document.getElementById(tabObj+"_cont"+i).style.display = "block";
                    }
                    else{
                        tabList[i].className = "normal";
                        document.getElementById(tabObj+"_cont"+i).style.display = "none";
                }
            }
        }

2，
$(document).ready(function(){

    var $tab_li = $('.tab ul li');

    $tab_li.hover(function(){

        $(this).addClass('selected').siblings().removeClass('selected');

        var index = $tab_li.index(this);

        $('div.tab_box > div').eq(index).show().siblings().hide();

    });

});