j叔说星座（js选项卡）

大家好，小经来为大家解答以上问题。j叔说星座，js选项卡很多人还不知道，现在让我们一起来看看吧！

1、 新建文件，引入js，创建保险商实验所列表

2、 为列表添加样式

3、 效果如图

4、 为每个列表里的里添加对应的内容

5、 将这些内容包含在一个大的差异里面，并且隐藏起来出来第一个差异的内容

6、 为大的差异设置样式

7、 效果如图，没有滑过效果

8、 射流研究…定义变量

9、 射流研究…创建里鼠标滑过的效果

10、 效果如图，只有鼠标滑过的效果，下面的内容没有变化

11、 射流研究…创建选项卡的效果，对应里对应下面的内容

12、 如图附上源码，

13、 titlejs常用的选项卡特效/标题

14、 脚本src='jquery。量滴js'/脚本

15、 /头

16、 风格

17、 *{保证金：0划：0;}

18、 ul，李{列表式：无；}。CP_qie{width:980pxheight:40pxborder-bottom:1pxsolid#398710；保证金：10px自动；}。CP_qieulLi{width:100pxheight:38px行高：38pxfloat:lefttext-align:center；}。oon{color:#fffbackground:#4b9416！重要；}。隐藏{显示：无}。last_box{width:980pxheight:100pxmargin:0pxauto}

19、 /风格

20、 脚本

21、 $(文档)。ready(function(){

22、 var$tab_li=$('.CP_qieulLi’)；

23、 $tab_li.hover(function(){

24、 $(这个)。addClass('oon').兄弟姐妹()。移除类("oon")；

25、 varindex=$tab_Li。指数(这个)；

26、 $('div.last_boxdiv').情商(指数)。显示()。兄弟姐妹()。hide()；

27、 });

28、 });

29、 /脚本

30、 身体

31、 divclass='cp_qie'

32、 保险商实验所

33、 李产品介绍/李

34、 里产品质检/李

35、 里证书主管官员/李

36、 里产品/李

37、 里参考文献/李

38、 /ul

39、 /div

40、 divclass='last_box'

41、 差异

42、 产品介绍的内容

43、 /div

44、 divclass='隐藏'

45、 产品质检的内容

46、 /div

47、 divclass='隐藏'

48、 证书证书的内容

49、 /div

50、 divclass='隐藏'

51、 产品报文交换数据服务的内容

52、 /div

53、 divclass='隐藏'

54、 参考文献的内容

55、 /div

56、 /div

57、 /body

本文到此结束，希望对大家有所帮助。

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！