JavaScript实现标签页切换的两种代码示例

作者：木棉时间：2026-10-31 00:50:31浏览：264

本文提供两种简单的JavaScript标签切换实现方案。第一种为原生JavaScript实现，通过遍历列表元素并控制显示隐藏状态完成切换；第二种基于jQuery库，利用hover事件和索引匹配实现Tab页的交互效果。代码简洁，适合基础前端开发参考。

JavaScript标签切换实现方案

这里提供两种实现方式，代码均较为简洁，直接展示具体实现。

第一种方案：

原生JavaScript实现


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";  
        }  
      }  
    }

第二种方案：

jQuery实现方式


$(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();

  });  

});

作者最新文章

JS中将数组和对象混合组装为JSON字符串

2026-11-05 16:41:42

JS运算符优先级与结合性的区别是什么？

2026-11-05 13:22:02

JS Map怎么只遍历Key或Value

2026-11-05 13:00:36

D3.js 与 ECharts 选型对比：灵活性 vs 开发效率

2026-11-05 09:45:01

为什么JS中typeof []返回object：数组类型检测误区解析

2026-11-04 19:50:47