html5 tab菜单切换页面,jquery实现tab菜单切换内容（精简版）

效果预览：

完整代码：

1 html>

2

3

4

jquery实现tab菜单切换内容(精简版)

5

6

7

8

9

10 我是A

11 我是B

12 我是C

13 我是D

14

15

16

17

我是A的内容

18

我是B的内容

19

我是C的内容

20

我是D的内容

21

22

23

24

25

26

27     //点击菜单执行函数

28     function tab(param) {

29         var sp_an=$(param).attr('list');//获取被点击菜单的list属性值(0,1,2,3)

30         $('.content').children('div').eq(sp_an).click();//点击菜单后，对应的内容被点击，从而实现展示

31         //使用click()方法模拟点击事件，触发下面的cont函数

32       }

33

34     //这个函数的触发是通过点击菜单的时候触发的

35     function cont(param){

36         $(param).show();//被选中的内容显示

37         $(param).siblings().hide();//没有被选中的内容隐藏

38     }

39

40

重点总结：

span标签中list属性值(0,1,2,3)用来与四个div内容一一对应

siblings()。在cont函数中使用siblings()方法来获取除了被选中元素的其他兄弟元素。siblings()是jquery的方法

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[jquery实现tab菜单切换内容(精简版)]http://www.zyiz.net/tech/detail-104417.html