JavaScript原生态&&jQuery实现tab菜单切换内容(附源码)

一,JavaScript实现:

我们使用了 querySelectorAll 方法来获取所有的 tab 按钮和 tab 内容,然后使用 forEach 循环遍历所有的 tab 按钮,为每个按钮添加点击事件监听器。当点击某个 tab 按钮时,根据对应的 data-tab 属性值找到相应的 tab 内容,然后显示该内容并隐藏其他内容。

源码:




  
  
  Tab 切换菜单
  



Tab 1 Content
Tab 2 Content
Tab 3 Content

二,jQuery实现

我们使用了 jQuery 来监听 tab 按钮的点击事件,当点击某个 tab 按钮时,根据对应的 data-tab 属性值找到相应的 tab 内容,然后显示该内容并隐藏其他内容。

JavaScript原生态&&jQuery实现tab菜单切换内容(附源码)_第1张图片

源码:


 
 
 jquery实现tab菜单切换内容(精简版)
 
 
 
     
     
我是A 我是B 我是C 我是D
我是A的内容
我是B的内容
我是C的内容
我是D的内容

你可能感兴趣的:(jquery,前端,javascript)